@fluent-windows/core/Toast/Toast.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("@fluent-windows/styles");

var root = function root(theme) {
  return {
    position: 'fixed',
    zIndex: 1001,
    backgroundColor: (0, _styles.themeGet)("colors.white.default", 'white')(theme),
    boxShadow: (0, _styles.themeGet)("shadows.3", '0px 6.4px 14.4px 0px rgba(0, 0, 0, 0.132), 0px 1.2px 3.6px 0px rgba(0, 0, 0, 0.108)')(theme),
    borderRadius: 2,
    padding: '6px 16px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: 288,
    minWidth: 288,
    '@media screen and (min-width: 600px)': {
      '&': {
        width: 'auto',
        minWidth: 340
      }
    }
  };
};

var baseSpace = 24;
var placementTopStart = {
  top: baseSpace,
  left: baseSpace,
  right: 'auto'
};
var placementTop = {
  top: baseSpace,
  left: '50%',
  right: 'auto',
  transform: 'translateX(-50%)'
};
var placementTopEnd = {
  top: baseSpace,
  left: 'auto',
  right: baseSpace
};
var placementBottomStart = {
  bottom: baseSpace,
  left: baseSpace,
  right: 'auto'
};
var placementBottom = {
  bottom: baseSpace,
  left: '50%',
  right: 'auto',
  transform: 'translateX(-50%)'
};
var placementBottomEnd = {
  bottom: baseSpace,
  left: 'auto',
  right: baseSpace
};
var placementCenter = {
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)'
};
var container = {
  padding: '8px 0',
  lineHeight: 1.5,
  flex: 1
};
var actions = {};

var styles = function styles(theme) {
  return {
    root: root(theme),
    placementTopStart: placementTopStart,
    placementTop: placementTop,
    placementTopEnd: placementTopEnd,
    placementBottomStart: placementBottomStart,
    placementBottom: placementBottom,
    placementBottomEnd: placementBottomEnd,
    placementCenter: placementCenter,
    container: container,
    actions: actions
  };
};

exports.styles = styles;