@layer components {
  [data-name="button"] {
    @apply flex flex-row items-center justify-center element;
    @apply: font-semibold whitespace-nowrap w-fit;

    &:not([data-disabled]) {
      @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;
    }
    
    &[data-disabled] {
      @apply disabled coloring-style-detect cursor-not-allowed;
    }

    &[data-size="xs"] {
      @apply gap-x-1 sizing-xs;
      @apply text-xs min-w-20;
      &[data-coloringstyle="outline"] {
        padding: 
          calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)) 
          calc(var(--spacing-element-padding-direction-xs) - var(--coloring-outline-width));
      }
    }
    &[data-size="sm"] {
      @apply gap-x-1 sizing-sm;
      @apply min-w-28;
      &[data-coloringstyle="outline"] {
        padding: 
          calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)) 
          calc(var(--spacing-element-padding-direction-sm) - var(--coloring-outline-width));
      }
    }
    &[data-size="md"] {
      @apply gap-x-2 sizing-md;
      @apply min-w-36;
      &[data-coloringstyle="outline"] {
        padding: 
          calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)) 
          calc(var(--spacing-element-padding-direction-md) - var(--coloring-outline-width));
      }
    }
    &[data-size="lg"] {
      @apply gap-x-2 sizing-lg;
      @apply text-lg min-w-45;
      &[data-coloringstyle="outline"] {
        padding: 
          calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)) 
          calc(var(--spacing-element-padding-direction-lg) - var(--coloring-outline-width));
      }
    }
  }
}