import styled from 'styled-components';

import { InputWrapper } from '../Input/StyledInput';
import { DropdownWrapper } from '../Dropdown/StyledDropdown';

const DatePickerContainer = styled.div`
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }

  & > ${DropdownWrapper} {
    display: block;
  }
`;

const DateRangeInputWrapper = styled(DatePickerContainer)`
  display: flex;
  position: relative;
  align-items: center;
  border: ${({ theme }) => theme.borderWidths.datePicker.range} solid
    ${({ theme }) => theme.colors.datePicker.rangeBorder};
  border-radius: ${({ theme }) => theme.radii.datePicker.range};

  &:focus-within {
    border-color: ${({ theme }) => theme.colors.datePicker.rangeFocusBorder};
    box-shadow: ${({ theme }) => theme.shadows.datePicker.range};
  }

  & > ${InputWrapper} {
    flex: 1 1;
    width: 0;
    border: none;
    box-shadow: none;
  }
`;

const DateSeparator = styled.span`
  margin: 0;
  padding: 0;
  color: ${({ theme }) => theme.colors.datePicker.text};
`;

const FocusBar = styled.div`
  position: absolute;
  margin: 0;
  padding: 0;
  bottom: 0;
  height: ${({ theme }) => theme.sizes.datePicker.rangeFocusBar};
  background: ${({ theme }) => theme.colors.datePicker.rangeFocusBar};
  transition: width 0.3s, left 0.3s, right 0.3s;
`;

export { DatePickerContainer, DateRangeInputWrapper, DateSeparator, FocusBar };