@use 'sass:color';
@use 'node_modules/attractions/_variables' as vars;
@use '../_appearances';

.text-field {
  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
    background-image: url(vars.$x-icon);
    background-size: contain;
    border: 0.1875em solid transparent;
    border-radius: 50%;
    cursor: pointer;
    height: 1.25em;
    position: relative;
    top: 1px;
    width: 1.25em;

    &:hover {
      background-color: color.adjust(vars.$dark, $alpha: -0.9);
    }
  }

  input,
  textarea {
    @include appearances.text-field;
    @include appearances.text-field-input;

    &:focus {
      @include appearances.text-field-focused;
    }
  }

  input:disabled,
  textarea:disabled {
    @include appearances.text-field-disabled;
  }

  textarea {
    height: 6em;
    padding: 0.75em 0.625em 0.0625em;
  }

  &.with-item {
    position: relative;

    &.left {
      flex-direction: row-reverse;

      input,
      textarea {
        padding-left: 3rem;
      }

      input[type='search'] {
        padding-left: 2.2em;
      }

      > :global .item {
        font-weight: vars.$bold-font-weight;
        left: 0.625em;
      }
    }

    &.right {
      input,
      textarea {
        padding-right: 1.875em;
        text-align: right;
      }

      > :global .item {
        right: 0.625em;
      }
    }

    > :global .item {
      color: vars.$textfield-item;
      height: 1.1em;
      position: absolute;
      top: 0.85em;
    }

    > input:focus + :global .item {
      color: vars.$main;
      stroke: vars.$main;

      :global svg {
        stroke: vars.$main;
      }
    }

    &.right-align input {
      text-align: right;
    }

    input[type='number'] {
      appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
      }
    }

    > :global svg.item {
      height: 1em;
      top: 0.9em;
    }

    input:invalid + :global svg.item {
      stroke: vars.$danger;
    }
  }

  &.outline {
    margin-top: 0.65em;
    position: relative;

    label {
      background-color: vars.$background;
      border-radius: 0.3125em;
      color: vars.$textfield-border;
      font-family: vars.$font;
      left: 1.4em;
      padding: 0 0.25em;
      position: absolute;
      top: 0;
      transform: translate(-0.25em, -55%);
    }

    &.with-item.left {
      input {
        padding-left: 2.2em;
      }

      label {
        left: 2.2em;
      }

      :global svg {
        stroke: vars.$disabled;
      }

      > input:focus ~ :global .item {
        color: vars.$main;
      }
    }

    input {
      background-color: transparent;
      border: 1px solid vars.$textfield-border;
      border-radius: vars.$textfield-outline-radius;
      padding: 0 1.4em;

      &:hover {
        border-color: color.adjust(#000, $alpha: -0.3);

        + label {
          color: color.adjust(#000, $alpha: -0.3);
        }
      }

      &:focus {
        border-color: vars.$main;

        + label {
          color: vars.$main;
        }
      }

      &:invalid {
        border-color: color.adjust(vars.$danger, $alpha: -0.3);

        + label {
          color: color.adjust(vars.$danger, $alpha: -0.3);
        }

        ~ :global svg.item {
          stroke: color.adjust(vars.$danger, $alpha: -0.3);
        }

        &:focus ~ :global svg.item {
          stroke: color.adjust(vars.$danger, $alpha: -0.3);
        }
      }
    }

    input:focus ~ :global svg.item {
      stroke: vars.$main;
    }
  }

  input:invalid {
    background: vars.$textfield-bg-error;
    border-bottom-color: vars.$danger;
    box-shadow: none;
  }

  input:not(.outline):invalid {
    background-color: vars.$textfield-bg-error;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  > .error {
    color: color.adjust(vars.$danger, $alpha: -0.3);
    font-size: 0.8rem;
    font-weight: vars.$bold-font-weight;
  }

  &.no-spinner > input[type='number'] {
    appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      appearance: none;
      margin: 0;
    }
  }
}