@layer components {
  /* Forms */
  .form-field {
    @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-container border-secondary shadow-xs w-full;
    @apply focus-within:border-secondary focus-within:shadow-none focus-within:ring-4 focus-within:ring-alpha-black-200;
    @apply transition-all duration-300;

    @variant theme-dark {
      @apply focus-within:ring-alpha-white-300;
    }

    /* Add styles for multiple select within form fields */
    select[multiple] {
      @apply py-2 pr-2 space-y-0.5 overflow-y-auto;

      option {
        @apply py-2 rounded-md;
      }

      option:checked {
        @apply after:content-['\2713'] bg-container-inset after:text-gray-500 after:ml-2;
      }

      option:active,
      option:focus {
        @apply bg-container-inset;
      }
    }
  }

  /* New form field structure components */
  .form-field__header {
    @apply flex items-center justify-between gap-2;
  }

  .form-field__body {
    @apply flex flex-col gap-1;
  }

  .form-field__actions {
    @apply flex items-center gap-1;
  }

  .form-field__label {
    @apply block text-xs text-secondary peer-disabled:text-subdued;
  }

  .form-field__input {
    @apply text-primary border-none bg-container text-sm opacity-100 w-full p-0;
    @apply focus:opacity-100 focus:outline-hidden focus:ring-0;
    @apply placeholder-shown:opacity-50;
    @apply disabled:text-subdued;
    @apply text-ellipsis overflow-hidden whitespace-nowrap;
    @apply transition-opacity duration-300;
    @apply placeholder:text-subdued;

    @variant theme-dark {
      &::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
      }
    }
  }

  textarea.form-field__input {
    @apply whitespace-normal overflow-auto;
    text-overflow: clip;
  }

  select.form-field__input,
  button.form-field__input  {
    @apply pr-10 appearance-none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right -0.15rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    text-align: left;
  }

  .form-field__radio {
    @apply text-primary;
  }

  .form-field__submit {
    @apply cursor-pointer rounded-lg bg-surface p-3 text-center text-white hover:bg-surface-hover;
  }

  /* Checkboxes */
  .checkbox {
    &[type='checkbox'] {
      @apply rounded-sm;
      @apply transition-colors duration-300;
    }
  }

  .checkbox--light {
    &[type='checkbox'] {
      @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-300 hover:bg-gray-300;
    }

    &[type='checkbox']:disabled {
      @apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400;
    }

    @variant theme-dark {
      &[type='checkbox'] {
        @apply ring-gray-900 checked:text-white;
        background-color: var(--color-gray-100);
      }

      &[type='checkbox']:disabled {
        @apply cursor-not-allowed opacity-80;
        background-color: var(--color-gray-600);
      }

      &[type='checkbox']:checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23808080' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
        background-color: var(--color-gray-100);
      }
    }
  }

  .checkbox--dark {
    &[type='checkbox'] {
      @apply ring-gray-900 checked:text-white;
    }

    &[type='checkbox']:disabled {
      @apply cursor-not-allowed opacity-80 ring-gray-600;
    }

    &[type='checkbox']:checked {
      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    }
  }

  /* Tooltips */
  .tooltip {
    @apply hidden absolute;
  }

  .qrcode svg path {
    fill: var(--color-black);
    @variant theme-dark {
      fill: var(--color-white);
    }
  }
}