@import "tailwindcss";
@import "tailwindcss/utilities";

.input, .range-input {
  @apply py-1 px-2 bg-black/25 border-b border-white/50 w-full relative;

  &:active, &:focus, &:focus-within {
    @apply border-b-1 border-b-primary-400;
  }

  &.no-bg {
    background-color: transparent;
    border-color: transparent;
  }

  input {
    width: 100%;
    outline: none;
    border: 1px solid transparent;
    background-color: transparent;
    color: #fff;
  }

  .unit {
    position: absolute;
    right: 0px;
    pointer-events: none;
    opacity: 0.69;
    font-size: 0.8rem;
    top: 0;
    transform: translateY(69%);
  }
}

.range-input {
  @apply flex flex-row;

  * {
    @apply mx-2;
  }


  input {
    max-width: 5rem;
  }

  input[type=range] {
    max-width: none;
  }
}

.field {
  @apply flex flex-row w-full my-2 items-center;

  &.l2 {
    margin-left: 4rem;
  }

  .label {
    flex: 0 0 25%;
    min-width: 16rem;
    text-align: right;
    padding-right: 1rem;

    .color-emphasis {
      @apply text-primary-400;
    }
    .sub-label {
      font-size: 0.9em;
      opacity: 0.69;
    }
  }

  .input, .range-input, .checkbox {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 24rem;
    min-width: 16rem;
  }

  .has-hint {
    display: flex;
    flex-direction: column;
  }

  .select {
    flex-grow: 1;
    flex-shrink: 1;

    min-width: 12px;
    max-width: 24rem;

    select {
      @apply bg-stone-950 border border-primary-800 text-white px-4 py-1;

      min-width: 12px;
      max-width: 100%;

      outline: none;

      font: inherit;
      font-size: inherit;

      option {
        @apply bg-stone-950 text-white;

        &:checked {
          @apply text-primary-400;
        }

        &:before {
          content: ">";
          display: none;
          background-color: #f41 !important;
          font-size: 5rem;;
        }
        &:hover {
          @apply text-black bg-primary-400;
        }
      }
    }
  }
}
.hint {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  margin-left: 5rem;
  box-sizing:border-box;

  &.error {
    color: #f41;
  }
}
