@use '../common/icons/error.scss' as e;
@use '../common/icons/approve.scss' as a;
@use '../common/icons/warning.scss' as w;
@use '../common/icons/caret.scss' as c;

@import '../common/variables/colors';
@import '../common/variables/sizes';
@import '../common/variables/typography';
@import '../common/variables/clip-paths';
@import '../common/mixins/mixins';

$input-status: ('success' $color-nature), ('warning' $color-sunshine),
  ('error' $color-plumber);

$icon-error-dimmension: 2px;

.snes-form-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  label {
    @include label-size;
  }

  &:has(input[type='radio']) {
    gap: $size-e-xs;
  }

  &:has(input[type='range']) {
    gap: $size-e-s;
  }
}

.snes-input {
  position: relative;
  display: flex;
  color: $background-white;
  @include pixelated-border;
  background-color: $background-white;

  input,
  select,
  textarea {
    border: none;
    outline: none;
    width: 100%;
    color: $main-color;
    @include input-size;
    background-color: transparent;
  }

  input[type='date'] {
    &::-webkit-calendar-picker-indicator {
      display: none;
    }
  }

  select {
    cursor: pointer;
    appearance: none;
    option {
      background-color: $background-white;
      padding: $size-e-xxxs;
    }
  }

  &::before {
    content: '';
    position: absolute;
    color: $color-plumber;
    z-index: 10;
  }

  @each $status, $color in $input-status {
    &.is-#{$status} {
      background-color: mix($color, white, 45%);
      color: $color;
    }
  }

  &:has(select) {
    &::before {
      color: $color-phantom;
      right: calc(0% + (#{c.$icon-width} * ($icon-error-dimmension / 1.5)));
      top: calc(50% - (#{c.$icon-height} * ($icon-error-dimmension)));
      @include c.caret-icon-before($icon-error-dimmension);
    }

    &.is-success {
      &::before {
        color: $color-nature;
      }
    }

    &.is-warning {
      &::before {
        color: $color-sunshine;
      }
    }

    &.is-error {
      &::before {
        color: $color-plumber;
      }
    }
  }

  &:has(input, textarea) {
    &.is-error {
      &::before {
        right: calc(0% + (#{e.$icon-width} * ($icon-error-dimmension / 1.5)));
        top: calc(50% - (#{e.$icon-height} * ($icon-error-dimmension)));
        @include e.error-icon-before($icon-error-dimmension);
      }
    }

    &.is-success {
      &::before {
        right: calc(0% + (#{a.$icon-width} * ($icon-error-dimmension / 1.5)));
        top: calc(50% - (#{a.$icon-height} * ($icon-error-dimmension)));
        @include a.approve-icon-before($icon-error-dimmension);
      }
    }

    &.is-warning {
      &::before {
        right: calc(0% + (#{w.$icon-width} * ($icon-error-dimmension / 1.5)));
        top: calc(50% - (#{w.$icon-height} * ($icon-error-dimmension)));
        @include w.warning-icon-before($icon-error-dimmension);
      }
    }
  }

  &:has(input:disabled, select:disabled, textarea:disabled) {
    background-color: $color-disabled;
    cursor: not-allowed;

    & > * {
      color: $color-text-hover;
      cursor: not-allowed;
    }
  }
}
