import { styled } from '~/styles';
import { Box } from '../Box';

export const Overlay = styled(Box)`
  position: absolute;
  background-color: #ffffff;
  line-height: normal;
  z-index: 1;

  .DayPicker {
    &-wrapper {
      margin: 0;
      padding: 0;
    }
    &-NavButton {
      margin: 0;
      padding: 0;
      background-image: none;
      border-style: solid;
      border-width: 2px 2px 0 0;
      height: 7px;
      width: 7px;
      color: ${({ theme }) => theme.colors.gray[2]};
      top: 20px;
      right: 10px;
      transform: rotate(45deg);

      &--prev {
        right: 50px;
        transform: rotate(-135deg);
      }
    }
    &-Month {
      margin: 0;
    }
    &-Caption {
      color: ${({ theme }) => theme.colors.gray[2]};
      font-size: ${({ theme }) => theme.fontSizes[0]};
      font-weight: ${({ theme }) => theme.fontWeights.semiBold};
      padding-top: 15px;
      margin-bottom: 20px;
    }
    &-Day {
      margin: 0;
      padding: 0;
      border-radius: 0;
      line-height: 30px;
      width: 20px;
      font-size: ${({ theme }) => theme.fontSizes[0]};
      color: ${({ theme }) => theme.colors.gray[1]};

      &--selected {
        background-color: ${({ theme }) => theme.colors.brandMain};
      }
      &--disabled {
        color: ${({ theme }) => theme.colors.disabled};
      }
      &--outside {
        color: ${({ theme }) => theme.colors.gray[2]};
      }
    }
  }
`;
