"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Label_1 = __importDefault(require("atoms/Text/Label"));
const Button_1 = require("atoms/Button");
/**
 * @todo invalid position names
 * @todo correct timing on transition
 */
const SnackBarWrapper = styled.aside.attrs({
    'data-qa': 'qa-toast',
}) `
  display: flex;
  background: #2c2c2c;
  position: fixed;
  margin: auto auto rem(10) auto;
  padding: rem(8) rem(100);
  min-height: rem(70);

  @media (max-width: 768px) {
    padding: rem(8) rem(20);
    width: calc(100% - 16px);
  }

  /* =========================== */
  transform: translateY(0);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  ${props => props.isVisible === false &&
    styled.css `
      transform: translateY(150%);
    `};
  ${props => props.isVisible === true &&
    styled.css `
      transform: translateY(0%);
    `};
  /* =========================== */

  ${props => props.position === 'bottomleft' &&
    styled.css `
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
    `};

  ${props => props.position === 'bottomcenter' &&
    styled.css `
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
    `};
`;
exports.SnackBarWrapper = SnackBarWrapper;
const Message = styled.withComponent(Label_1.default) `
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  margin: auto;
`;
exports.Message = Message;
// TextButton - needs adapter?
/* align-self: flex-end; */
exports.SnackBarActionButton = styled.withComponent(Button_1.Button) `
  color: #009944;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;

  ${Button_1.ButtonLabel} {
    margin: 0;
  }

`;
//# sourceMappingURL=styled.js.map