@layer components {
  .hdmt {
    @apply cursor-pointer relative w-10 h-7 text-sm rounded-full border-2 border-ground/50 dark:border-negative/20 bg-warning/75 dark:bg-primary-highlight dark:hover:bg-primary-highlight-dark self-center transform duration-200;

    .toggle {
      @apply w-6 h-6 rounded-full border border-ground/50 grid place-content-center shadow-lg bg-negative text-negative-text absolute bottom-0 left-0 dark:left-3 transform duration-200;
    }
  }
}