.file-input {
  @apply border-base-content bg-base-100 rounded-btn overflow-hidden border border-opacity-0 text-base;
  &::file-selector-button {
    border-style: solid;
    @apply border-neutral bg-neutral text-neutral-content font-semibold uppercase no-underline;
    border-width: var(--border-btn, 1px);
    animation: button-pop var(--animation-btn, 0.25s) ease-out;
  }
  &-bordered {
    @apply border-opacity-20;
  }
  &:focus {
    @apply outline-base-content/20 outline outline-2 outline-offset-2;
  }
  &-ghost {
    @apply bg-opacity-5;
    &:focus {
      @apply text-base-content bg-opacity-100;
      box-shadow: none;
    }
    &::file-selector-button {
      @apply border border-transparent bg-transparent text-current;
    }
  }
  &-primary {
    @apply border-primary;
    &:focus {
      @apply outline-primary;
    }
    &::file-selector-button {
      @apply border-primary bg-primary text-primary-content;
    }
  }
  &-secondary {
    @apply border-secondary;
    &:focus {
      @apply outline-secondary;
    }
    &::file-selector-button {
      @apply border-secondary bg-secondary text-secondary-content;
    }
  }
  &-accent {
    @apply border-accent;
    &:focus {
      @apply outline-accent;
    }
    &::file-selector-button {
      @apply border-accent bg-accent text-accent-content;
    }
  }
  &-info {
    @apply border-info;
    &:focus {
      @apply outline-info;
    }
    &::file-selector-button {
      @apply border-info bg-info text-info-content;
    }
  }
  &-success {
    @apply border-success;
    &:focus {
      @apply outline-success;
    }
    &::file-selector-button {
      @apply border-success bg-success text-success-content;
    }
  }
  &-warning {
    @apply border-warning;
    &:focus {
      @apply outline-warning;
    }
    &::file-selector-button {
      @apply border-warning bg-warning text-warning-content;
    }
  }
  &-error {
    @apply border-error;
    &:focus {
      @apply outline-error;
    }
    &::file-selector-button {
      @apply border-error bg-error text-error-content;
    }
  }
  &-disabled,
  &[disabled] {
    @apply border-base-200 bg-base-200 placeholder-base-content cursor-not-allowed text-opacity-20 placeholder-opacity-20;
    &::file-selector-button {
      @apply bg-neutral text-base-content border-opacity-0 bg-opacity-20 text-opacity-20;
    }
  }
}
