"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DissmissButton = exports.BarWrapper = exports.transitionTime = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
const theme_1 = require("../../styles/theme");
const Grid_1 = require("../Grid");
const LinkButton_1 = require("../LinkButton");
exports.transitionTime = 300;
exports.BarWrapper = styled_components_1.default(Grid_1.Grid) `
  visibility: hidden;
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  grid-gap: 0;
  grid-template-columns: 30px auto minmax(30px, auto);
  color: ${theme_1.theme.colors.white};
  background: ${theme_1.theme.colors.gray[1]};
  border-radius: ${theme_1.theme.radii[2]};
  box-shadow: ${theme_1.theme.shadows[3]};
  max-width: 390px;
  min-height: 64px;
  padding: 16px;
  align-items: center;
  z-index: 9999;
  transition: transform ${exports.transitionTime}ms, visibility ${exports.transitionTime}ms;

  &.show {
    visibility: visible;
    transform: translateX(-50%);
  }

  &.left {
    left: 32px;
  }

  &.right {
    left: unset;
    right: 32px;
  }

  &.left,
  &.right {
    transform: translateX(0%) translateY(-150%);
  }

  &.left.show,
  &.right.show {
    transform: translateX(0%);
  }
`;
exports.DissmissButton = styled_components_1.default(LinkButton_1.LinkButton) `
  margin-left: 32px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 16px;
  color: ${theme_1.theme.colors.brandLighter};

  &:hover {
    background: rgba(109, 199, 247, 0.25);
  }
`;
//# sourceMappingURL=styles.js.map