.form  {
  @apply p-8 rounded bg-white;
}

.double-field {
  @apply grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-5 md:gap-x-8;
  > .field {
    @apply mb-0;
  }
  &:not(:last-child) {
    @apply mb-4;
  }
}

.is-primary {
  @apply accent-primary-700;
}

.is-secondary {
  @apply accent-secondary-700;
}

.is-tertiary {
  @apply accent-tertiary-700;
}

.field {
  &:not(:last-child) { @apply mb-4; }
  &.field-button {
    @apply mt-6;
  }
  .label {
    @apply mb-1 block font-semibold;
  }

  .input,
  .textarea,
  .select-inner,
  .input-file {
    @apply w-full text-gray-800 px-5 py-2 rounded bg-gray-100 border border-gray-200/60 outline-none focus:border-primary-400 transition-all duration-300 ease-in-out;
    &[disabled] {
      @apply cursor-not-allowed;
    }
    &.error {
      @apply border-red-500 text-red-500/90 bg-red-500/20;
      &::placeholder {
        @apply text-red-500/90;
      }
    }
    &.success {
      @apply text-green-600/90 border-green-500 bg-green-500/20;
      &::placeholder {
        @apply text-green-500/90;
      }
    }
    &.warning {
      @apply text-yellow-500/90 border-yellow-500 bg-yellow-500/10;
      &::placeholder {
        @apply text-yellow-500/90;
      }
    }

    &.is-flat {
      @apply rounded-none;
    }
    &.is-full-rounded {
      @apply rounded-full;
    }

    &.is-small {
      @apply text-sm py-1 px-3;
    }
    &.is-large {
      @apply text-xl py-3 px-6;
    }

  }

  .textarea {
    @apply resize-y min-h-24 max-h-32;
    &.is-full-rounded {
      @apply rounded-3xl;
    }
    &.is-small {
      @apply min-h-[4rem] h-20 max-h-28;
    }
    &.is-large {
      @apply min-h-[6rem] h-40 max-h-52;
    }
  }

  .input-file {
    @apply p-2 cursor-pointer;
    &:hover {
      @apply bg-primary-600 text-white;
    }
  }

  .radio-group,
  .check-group {
    @apply flex flex-wrap;
    > *:not(:last-child) { @apply mr-3; }
  }
  .checkbox,
  .radio {
    @apply cursor-pointer;
    .label {
      @apply font-body inline-block font-normal ml-2 cursor-pointer;
    }
    &.is-toggle {
      @apply cursor-auto relative;
      input {
        @apply absolute -z-[1] opacity-0;
      }
      .label {
        @apply align-middle relative w-[4.5rem] h-8 m-0 px-2 py-1 bg-gray-100 rounded-2xl transition-all duration-300 ease-in-out;
        &::before {
          @apply absolute z-1 left-2 content-[""] block h-6 w-6 bg-gray-400 rounded-full transition-all duration-300 ease-in-out;
        }
      }
      .label-text {
        @apply align-middle cursor-pointer;
      }
      input:checked + .label {
        @apply bg-primary-300/40;
        &::before {
          @apply left-10 bg-primary-600;
        }
      }
      input:disabled + .label {
        @apply bg-gray-100/70 cursor-not-allowed;
        &::before {
          @apply bg-gray-400/50 cursor-not-allowed;
        }
      }
      &.is-secondary {
        input:checked + .label {
          @apply bg-secondary-300/40;
          &::before {
            @apply bg-secondary-600;
          }
        }
      }
      &.is-tertiary {
        input:checked + .label {
          @apply bg-tertiary-300/40;
          &::before {
            @apply bg-tertiary-600;
          }
        }
      }
    }
  }
  .error-message,
  .success-message,
  .warning-message,
  .desc {
    @apply text-sm mt-1;
  }
  .desc {
    @apply text-gray-500 font-normal;
  }
  .error-message {
    @apply text-red-500/90;
  }
  .success-message {
    @apply text-green-500/90;
  }
  .warning-message {
    @apply text-yellow-500/90;
  }
}

.has-icon {
  .input-icon {
    @apply relative;
    .icon {
      @apply inline-block text-gray-500 w-6 h-6 absolute left-2 top-2;
    }
    .input { @apply pl-10; }
  }
  &.to-right {
    .icon { @apply left-auto right-2; }
    .input { @apply pl-5 pr-10; }
  }
}

.has-button {
  .input-button {
    @apply flex;

    .input {
      @apply rounded-tr-none rounded-br-none;
    }
    .button {
      @apply rounded-tl-none rounded-bl-none;
    }
  }
  .input-float-button {
    @apply relative;
    button, .button {
      @apply absolute right-4 z-1 top-1/2 -translate-y-1/2;
    }
  }
}

.has-select {
  .input-select {
    @apply flex;
    .select-inner {
      @apply rounded-tr-none rounded-br-none w-3/12 pl-2 pr-0 bg-white/90;
    }
    .input {
      @apply rounded-tl-none rounded-bl-none;
    }
  }
}

.has-select-button {
  .input-select-button {
    @apply flex;
    .select-inner {
      @apply rounded-tr-none rounded-br-none w-auto flex-1 pl-2 pr-0 bg-white/90;
    }
    .input {
      @apply rounded-none;
    }
    .button {
      @apply rounded-tl-none rounded-bl-none;
    }
  }
}

.field-select {
  @apply relative inline-block w-auto;

  .select-items {
    @apply p-4 bg-white/40 backdrop-blur-sm border border-slate-50 rounded w-full absolute left-0 -z-1 opacity-0 min-h-[90px] max-h-[200px] overflow-y-scroll transition-all duration-300 ease-in-out;
    li {
      @apply p-2 cursor-pointer transition-all duration-300 ease-in-out hover:bg-slate-100/70;
      &:not(:last-child) {
        @apply border-b border-slate-200;
      }
    }
  }
  .select-search {
    &:focus ~ .select-items {
      @apply z-20 opacity-100;
    }
  }
}