import styled from 'styled-components/macro';

import { CountryIcon } from '../../../../../components/CountryIcon/CountryIcon';
import { Icon } from '../../../../../components/Icon/Icon';
import { TriggerButton } from '../../../../../components/TriggerButton/TriggerButton';
import { color, other, radius, shadow } from '../../../../../theme';

export const TunedChevron = styled(Icon)`
  color: ${color('ref/palette/gray/500')};
  height: 16px;
  transform: rotate(0deg);
  transition: transform 0.3s ${other('sys/timing-function/smooth')};
  width: 16px;
`;

export const TunedTriggerButton = styled(TriggerButton)`
  align-items: center;
  appearance: none;
  background-color: transparent;
  border: 1px solid ${color('sys/color/input/border/default')};
  border-bottom-color: transparent;
  border-bottom-left-radius: ${radius('sys/radius/form-item')};
  border-left-color: transparent;
  border-top-color: transparent;
  border-top-left-radius: ${radius('sys/radius/form-item')};
  cursor: pointer;
  display: flex;
  height: 100%;
  outline: none;
  padding-left: 9px;
  padding-right: 0;
  pointer-events: auto;
  position: relative;
  width: 50px;

  &:disabled {
    cursor: not-allowed;
  }

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

  &:focus-visible:not(:disabled) {
    border-color: ${color('sys/color/input/border/focus')};
    border-bottom-color: ${color('sys/color/input/border/focus')};
    border-left-color: ${color('sys/color/input/border/focus')};
    border-top-color: ${color('sys/color/input/border/focus')};
    box-shadow: ${shadow('sys/shadow/focus')};
  }

  &[aria-expanded='true'] ${TunedChevron} {
    transform: rotate(180deg);
  }
`;

export const TunedCountryIcon = styled(CountryIcon)`
  height: 20px;
  width: 20px;
`;