@fluent-windows/core/Card/Card.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 {
    overflow: 'hidden',
    borderRadius: 4,
    boxShadow: theme.shadows[2],
    backgroundColor: theme.colors.white["default"],
    transition: theme.transitions.card
  };
};

var hover = function hover(theme) {
  return {
    '&:hover': {
      cursor: 'pointer',
      boxShadow: theme.shadows[3]
    }
  };
};

var acrylic = function acrylic(theme) {
  return {
    '&::before': {
      transition: theme.transitions.card,
      boxShadow: "inset 0 0 2px 1px ".concat((0, _styles.lighten)(theme.colors.white["default"], 0.2))
    },
    '&:hover': {
      '&::before': {
        filter: 'brightness(105%)',
        boxShadow: "inset 0 0 2px 1px ".concat((0, _styles.lighten)(theme.colors.white["default"], 0.4))
      }
    }
  };
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    hover: hover(theme),
    acrylic: acrylic(theme)
  };
};

exports.styles = styles;