import styled from 'styled-components';
import { theme } from '../../styles/theme';
import { Grid } from '../Grid';
import { LinkButton } from '../LinkButton';

export const transitionTime = 300;

export const BarWrapper = styled(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.colors.white};
  background: ${theme.colors.gray[1]};
  border-radius: ${theme.radii[2]};
  box-shadow: ${theme.shadows[3]};
  max-width: 390px;
  min-height: 64px;
  padding: 16px;
  align-items: center;
  z-index: 9999;
  transition: transform ${transitionTime}ms, visibility ${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%);
  }
`;

export const DissmissButton = styled(LinkButton)`
  margin-left: 32px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 16px;
  color: ${theme.colors.brandLighter};

  &:hover {
    background: rgba(109, 199, 247, 0.25);
  }
`;
