import { css } from 'styled-components';

export const FormFocusCss = css`
  &[data-focus-visible] {
    outline: var(--form-outline);
    outline-color: var(--form-outline-color-focus);
    outline-offset: var(--form-outline-offset);
  }
`;

export const FormPlaceholderCss = css`
  &::placeholder {
    color: var(--form-color-placeholder);
  }
`;

export const FormControlCss = css`
  appearance: none;
  font-family: inherit;
  font-size: var(--form-control-font-size);
  font-weight: var(--form-control-font-weight);
  line-height: var(--form-control-line-height);
  border: var(--form-border);
  border-width: var(--form-border-width);
  border-color: var(--form-border-color);
  border-radius: var(--form-border-radius);
  outline: var(--form-outline);
  outline-offset: var(--form-outline-offset);
  background-color: var(--form-background-color);
  color: var(--form-color);
  transition: var(--form-transition);

  & svg {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
  }

  &::placeholder {
    color: var(--form-color-placeholder);
  }

  &.hidden {
    display: none;
  }

  ${FormFocusCss}
  ${FormPlaceholderCss}

  &.disabled {
    background-color: var(--form-background-color-disabled);
    color: var(--form-color-disabled);
    cursor: not-allowed;
  }

  &:hover:not(.disabled) {
    border-color: var(--form-border-color-hover);
  }

  &:active:not(.disabled),
  &.active:not(.disabled) {
    outline-color: var(--form-outline-color-focus);
    border-color: var(--form-border-color-hover);

    .placeholder {
      opacity: 0.5;
    }
  }

  &.focus {
    outline-color: var(--form-outline-color-focus);

    input::placeholder {
      color: var(--form-color-placeholder);
    }
  }
`;