import styled from 'styled-components/macro';

import { color } from '../../theme';
import { MaskedInput } from '../MaskedInput';
import { commonInputStyles } from '../StyledInput';

export const TunedDatePickerInput = styled(MaskedInput)`
  @mixin ${commonInputStyles};
  padding-right: 42px;
  width: 100%;
`;

export const StyledWrapper = styled.div`
  position: relative;
`;

export const StyledCalendarButton = styled.button`
  appearance: none;
  background-color: transparent;
  border-style: none;
  color: ${color('sys/color/input/border/default')};
  height: 36px;
  outline: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 36px;

  &:disabled {
    cursor: not-allowed;
  }

  &:hover:not(&:disabled) {
    color: ${color('sys/color/input/border/focus')};
  }

  &:focus:not(&:disabled) {
    color: ${color('sys/color/input/border/focus')};
  }
`;