@fluent-windows/core/IconButton/IconButton.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var _styles = require("../styles");

var root = function root(theme) {
  return {
    border: 'none',
    outline: 'none',
    display: 'inline-flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    color: 'inherit',
    borderRadius: '50%',
    overflow: 'hidden',
    transition: theme.transitions.button,
    '&:disabled': {
      color: theme.colors.standard.dark3,
      cursor: 'not-allowed',
      pointerEvents: 'none'
    }
  };
};

var variantStandard = function variantStandard(theme) {
  return {
    color: theme.colors.primary["default"],
    backgroundColor: 'transparent',
    '&:hover, &:focus': {
      backgroundColor: (0, _styles.lighten)(theme.colors.primary.light1, 0.08)
    },
    '&:active': {
      backgroundColor: (0, _styles.lighten)(theme.colors.primary.light1, 0.36)
    }
  };
};

var variantPrimary = function variantPrimary(theme) {
  return {
    color: theme.colors.white["default"],
    backgroundColor: theme.colors.primary["default"],
    boxShadow: theme.shadows[3],
    '&:hover, &:focus': {
      backgroundColor: theme.colors.primary.dark1
    },
    '&:active': {
      color: theme.colors.white["default"],
      backgroundColor: theme.colors.primary.dark3,
      boxShadow: theme.shadows[4]
    }
  };
};

var sizeSmall = function sizeSmall(theme) {
  return theme.sizes.small.iconButton;
};

var sizeMedium = function sizeMedium(theme) {
  return theme.sizes.medium.iconButton;
};

var sizeLarge = function sizeLarge(theme) {
  return theme.sizes.large.iconButton;
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    variantStandard: variantStandard(theme),
    variantPrimary: variantPrimary(theme),
    sizeSmall: sizeSmall(theme),
    sizeMedium: sizeMedium(theme),
    sizeLarge: sizeLarge(theme)
  };
};

exports.styles = styles;