.btn {
    @apply no-underline gap-2 h-12 px-7  border inline-flex  cursor-pointer select-none;
    @apply items-center justify-center border-transparent text-center transition duration-100 ease-in-out rounded-lg;
    &:active:hover,
    &:active:focus {
        transform: scale(0.97);
    }

    /* default btn */
    & {
        @apply border-base-200 bg-base-200 text-base-content  outline-base-content;
        @media (hover: hover) {
            &:hover {
                @apply border-base-300 bg-base-300;
            }
        }
    }
    /* brand colors */
    &-primary {
        @apply border-primary bg-primary text-primary-content outline-primary;
        @media (hover: hover) {
            &:hover {
                @apply border-primary-focus bg-primary-focus;
            }
        }
    }
    &-secondary {
        @apply border-secondary bg-secondary text-secondary-content outline-secondary;
        @media (hover: hover) {
            &:hover {
                @apply border-secondary-focus bg-secondary-focus;
            }
        }
    }
    &-orange {
        @apply border-orange bg-orange text-orange-content outline-orange;
        @media (hover: hover) {
            &:hover {
                @apply border-orange-focus bg-orange-focus;
            }
        }
    }
    &-neutral {
        @apply border-neutral bg-neutral text-base-content outline-neutral;
        @media (hover: hover) {
            &:hover {
                @apply border-neutral-focus bg-neutral-focus;
            }
        }
    }

    /* btn with state colors */
    &-info {
        @apply border-info bg-info text-info-content outline-info;
        @media (hover: hover) {
            &:hover {
                @apply border-info bg-info;
            }
        }
    }
    &-success {
        @apply border-success bg-success text-base-100 outline-success;
        @media (hover: hover) {
            &:hover {
                @apply border-success bg-success;
            }
        }
    }
    &-warning {
        @apply border-warning bg-warning text-base-100 outline-warning;
        @media (hover: hover) {
            &:hover {
                @apply border-warning bg-warning;
            }
        }
    }
    &-error {
        @apply border-error bg-error text-base-100 outline-error;
        @media (hover: hover) {
            &:hover {
                @apply border-error bg-error;
            }
        }
    }

    /* btn variants */
    &-ghost {
        @apply border border-transparent bg-transparent text-current  outline-current;
        @media (hover: hover) {
            &:hover {
                @apply border-opacity-0 bg-base-content bg-opacity-20;
            }
        }
    }
    &-link {
        @apply border-transparent bg-transparent text-primary   outline-none h-auto px-1;
        @media (hover: hover) {
            &:hover {
                @apply border-transparent bg-transparent underline;
            }
        }
    }

    /* outline */
    &-outline {
        @apply border-current bg-transparent text-base-content;
        @media (hover: hover) {
            &:hover {
                @apply border-base-content bg-base-content text-base-100;
            }
        }
        &.btn-primary {
            @apply text-primary;
            @media (hover: hover) {
                &:hover {
                    @apply border-primary-focus bg-primary-focus text-primary-content;
                }
            }
        }
        &.btn-secondary {
            @apply text-secondary;
            @media (hover: hover) {
                &:hover {
                    @apply border-secondary-focus bg-secondary-focus text-secondary-content;
                }
            }
        }
        &.btn-orange {
            @apply text-orange;
            @media (hover: hover) {
                &:hover {
                    @apply border-orange-focus bg-orange-focus text-orange-content;
                }
            }
        }
        &.btn-success {
            @apply text-success;
            @media (hover: hover) {
                &:hover {
                    @apply border-success bg-success text-base-100;
                }
            }
        }
        &.btn-info {
            @apply text-info;
            @media (hover: hover) {
                &:hover {
                    @apply border-info bg-info text-base-100;
                }
            }
        }
        &.btn-warning {
            @apply text-warning;
            @media (hover: hover) {
                &:hover {
                    @apply border-warning bg-warning text-base-100;
                }
            }
        }
        &.btn-error {
            @apply text-error;
            @media (hover: hover) {
                &:hover {
                    @apply border-error bg-error text-base-100;
                }
            }
        }
    }

    /* disabled */
    &[disabled],
    &:disabled {
        @apply pointer-events-none border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
    }
    @media (hover: hover) {
        &[disabled]:hover,
        &:disabled:hover {
            @apply border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
        }
    }

    /* size and shape */
    &-xs {
        @apply h-6 px-2;
        font-size: 0.75rem;
    }
    &-sm {
        @apply h-8 px-3;
        font-size: 0.875rem;
    }
    &-md {
        @apply h-12 px-4;
        font-size: 0.875rem;
    }
    &-lg {
        @apply h-16 px-6;
        font-size: 1.125rem;
    }
    &-wide {
        @apply w-64 flex-nowrap;
    }
    &-block {
        @apply w-full;
    }
    &-square {
        &:where(.btn-xs) {
            @apply h-6 w-6 p-0;
        }
        &:where(.btn-sm) {
            @apply h-8 w-8 p-0;
        }
        &:where(.btn-md) {
            @apply h-12 w-12 p-0;
        }
        &:where(.btn-lg) {
            @apply h-16 w-16 p-0;
        }
    }
}