"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

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 = styleh_components_1.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 && styleh_components_1.styled.css`
      transform: translateY(150%);
    `};
  ${props => props.isVisible === true && styleh_components_1.styled.css`
      transform: translateY(0%);
    `};
  /* =========================== */

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

  ${props => props.position === 'bottomcenter' && styleh_components_1.styled.css`
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
    `};
`;
exports.SnackBarWrapper = SnackBarWrapper;
const Message = styleh_components_1.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 = styleh_components_1.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