@use 'sass:map';
@use './palette' as palette;
@use './spacers' as spacers;
@use './font-settings' as font-settings;
@use './breakpoints' as breakpoints;

@mixin input-wrapper {
  width: 100%;
}

@mixin input-container {
  display: flex;
  font-size: font-settings.$font-size-sm;
  width: 100%;
  border: 2px solid palette.$neutral700;
  outline: none;
  background: palette.$white;

  &:focus-within {
    background: palette.$white;
    border-color: palette.$neutral900;
    box-shadow: 0 0 0 2px palette.$neutral900;
  }

  &:hover {
    background: palette.$neutral50;
    border-color: palette.$neutral700;
    box-shadow: 0 0 0 1px palette.$neutral700;

    &:focus-within {
      border-color: palette.$black;
      box-shadow: 0 0 0 2px palette.$black;
    }
  }

  &--on-blueberry {
    border-color: palette.$blueberry500;

    &:hover {
      background: palette.$blueberry50;
      box-shadow: 0 0 0 1px palette.$blueberry500;
      border-color: palette.$blueberry500;
    }

    &:focus-within {
      background: palette.$white;
      border-color: palette.$neutral900;
      box-shadow: 0 0 0 2px palette.$neutral900;
    }
  }

  &--on-dark {
    border-color: palette.$blueberry900;

    &:hover {
      background: palette.$blueberry50;
      border-color: palette.$blueberry900;
      box-shadow: 0 0 0 1px palette.$blueberry900;
    }

    &:focus-within {
      background: palette.$white;
      border-color: palette.$neutral900;
      box-shadow: 0 0 0 2px palette.$neutral900;
    }
  }

  &--invalid {
    border-color: palette.$cherry600;

    &:hover {
      background: palette.$cherry100;
      border-color: palette.$cherry600;
      box-shadow: 0 0 0 2px palette.$cherry600;
    }

    &:focus-within {
      background: palette.$white;
      border-color: palette.$neutral900;
      box-shadow: 0 0 0 2px palette.$neutral900;
    }
  }

  &--transparent {
    background: transparent;

    &:hover {
      background: palette.$neutral100;
    }

    &:focus-within {
      background: palette.$white;
    }
  }
  &--transparent#{&}--on-blueberry {
    &:hover {
      background: palette.$blueberry100;
    }

    &:focus-within {
      background: palette.$white;
    }
  }

  &--disabled {
    background: transparent;
    border-color: palette.$neutral600;
    border-style: dashed;
    color: palette.$neutral700;

    &:hover {
      background: transparent;
      border-color: palette.$neutral600;
      box-shadow: none;
    }
  }

  &__input {
    line-height: 1.625rem;
    font-family: inherit;
    font-size: font-settings.$font-size-sm;
    border: none;
    outline: none;
    background-color: transparent;
    width: 100%;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      font-size: font-settings.$font-size-md;
    }

    &::placeholder {
      color: palette.$neutral500;
    }

    &--disabled {
      color: palette.$neutral700;
    }
  }
}