@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';

.label {
  display: inline-block;
  margin-bottom: var(--pix-spacing-1x);
  margin-left: 1px;
  color: var(--pix-neutral-900);
  font-weight: var(--pix-font-medium);
  font-size: 1rem;
}

.input {
  height: 40px;
  padding-left: 15px;
  color: var(--pix-neutral-800);
  font-size: 1rem;
  border: 1px solid var(--pix-neutral-500);
  border-radius: 4px;
  outline: none;

  &:focus {
    border-color: var(--pix-primary-500);
    outline: 2px solid var(--pix-primary-300);
  }

  &--small {
    width: 160px;
  }
}

.form {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--pix-spacing-8x);

  &__field {
    display: flex;
    flex-direction: column;
    margin: var(--pix-spacing-4x) 0;

    @include breakpoints.device-is('desktop') {
      width: 500px;
    }

    &--wide input,
    select,
    textarea {
      width: 100%;
    }
  }

  &__validation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pix-spacing-8x);

    @include breakpoints.device-is('desktop') {
      max-width: 500px;
    }
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

/* Firefox */
input[type='number'] {
  appearance: textfield;
}

.textarea {
  padding: 8px;
  color: var(--pix-neutral-800);
  font-size: 1rem;
  border: 1px solid var(--pix-neutral-500);
  border-radius: 4px;
  outline: none;
  resize: none;

  &:focus {
    border: 2px solid var(--pix-primary-500);
  }
}

.error-message {
  color: var(--pix-error-700);

  @extend %pix-body-s;

  & a {
    text-decoration: underline;
  }
}

.button {
  &--disabled {
    opacity: 0.7;
    pointer-events: none;
  }

  &--showed-as-link {
    color: var(--pix-neutral-500);

    @extend %pix-body-s;

    text-decoration: underline;
    background: none;
    border: none;

    &:hover {
      color: var(--pix-primary-500);
      cursor: pointer;
    }

    &:focus {
      background-color: var(--pix-primary-10);
      outline:2px solid var(--pix-primary-300);
      outline-offset: 0;
    }
  }
}

