drawer.css

.drawer.drawer-end > .drawer-toggle:checked ~ .drawer-content {
  @apply -translate-x-2;
}
.drawer-toggle {
  & ~ .drawer-content {
    @apply transition-all duration-300 ease-in-out;
  }
  & ~ .drawer-side {
    & > .drawer-overlay {
      @apply cursor-pointer bg-neutral-focus transition-all duration-300 ease-in-out;
    }
    & > .drawer-overlay + * {
      @apply transition-all duration-300 ease-in-out;
    }
  }
  &:checked {
    & ~ .drawer-content {
      @apply translate-x-2;
    }
    & ~ .drawer-side {
      & > .drawer-overlay {
        opacity: 0.999999; /* 1 causes a bug on chrome 🤷‍♂️ */
        @apply bg-opacity-40;
      }
    }
  }
  &:focus-visible {
    & ~ .drawer-content .drawer-button {
      outline: 2px solid hsl(var(--nf));
      outline-offset: 2px;
      &.btn-primary {
        outline: 2px solid hsl(var(--p));
      }
      &.btn-secondary {
        outline: 2px solid hsl(var(--s));
      }
      &.btn-accent {
        outline: 2px solid hsl(var(--a));
      }
      &.btn-info {
        outline: 2px solid hsl(var(--in));
      }
      &.btn-success {
        outline: 2px solid hsl(var(--su));
      }
      &.btn-warning {
        outline: 2px solid hsl(var(--wa));
      }
      &.btn-error {
        outline: 2px solid hsl(var(--er));
      }
      &.glass {
        outline: 2px solid currentColor;
      }
      &.btn-ghost {
        outline: 2px solid currentColor;
      }
      &.btn-link {
        outline: 2px solid currentColor;
      }
    }
  }
}
@media (min-width: 1024px) {
  .drawer-mobile {
    & > .drawer-toggle {
      &:checked {
        & ~ .drawer-content {
          @apply translate-x-0;
        }
      }
    }
  }
}