$button: $prefix + "button";

.#{$button} {
    @apply inline-flex items-center gap-2 text-center font-medium rounded-lg relative focus:z-10 focus:outline-none justify-center whitespace-nowrap;

    &-block-true {
        @apply w-full;
    }

    &-size-default.#{$button}-link-false {
        @apply px-5 py-2.5 text-sm;
    }

    &-size-small.#{$button}-link-false {
        @apply h-9 px-3 py-2 text-sm;

        .#{$prefix}icon {
            @apply w-5 h-5;
        }
    }

    &-size-medium.#{$button}-link-false {
        @apply px-5 py-2.5 text-sm;

        .#{$prefix}icon {
            @apply w-6 h-6;
        }
    }

    &-size-large.#{$button}-link-false {
        @apply px-5 py-3 text-base;

        .#{$prefix}icon {
            @apply w-7 h-7;
        }
    }
}

@each $key, $value in $colors {
    .#{$button}-color-#{$key}.#{$button}-link-false.#{$button}-outline-false.#{$button}-disabled-false.#{$button}-ghost-false {
        @apply text-white bg-#{$value}-700 hover:bg-#{$value}-800 focus:ring-4 focus:ring-#{$value}-300 dark:bg-#{$value}-600 dark:hover:bg-#{$value}-700 dark:focus:ring-#{$value}-800;
    }

    .#{$button}-color-#{$key}.#{$button}-link-false.#{$button}-disabled-true {
        @apply text-white bg-#{$value}-400 cursor-not-allowed pointer-events-none dark:bg-#{$value}-500;
    }

    .#{$button}-color-#{$key}.#{$button}-link-false.#{$button}-outline-true.#{$button}-ghost-false {
        @apply text-#{$value}-700 border border-#{$value}-700 hover:text-white hover:bg-#{$value}-800 focus:ring-4 focus:ring-#{$value}-300 dark:border-#{$value}-500 dark:text-#{$value}-400 dark:hover:text-white dark:hover:bg-#{$value}-500 dark:focus:ring-#{$value}-800;
    }

    .#{$button}-color-#{$key}.#{$button}-link-false.#{$button}-ghost-true.#{$button}-outline-false {
        @apply text-#{$value}-700 hover:text-#{$value}-800 dark:text-#{$value}-400 dark:hover:text-#{$value}-700;
    }

    .#{$button}-color-#{$key}.#{$button}-link-true.#{$button}-ghost-false.#{$button}-outline-false {
        @apply text-#{$value}-700 hover:text-#{$value}-800 dark:text-#{$value}-400 dark:hover:text-#{$value}-700;
    }
}

.#{$button}-color-default.#{$button}-link-false.#{$button}-ghost-false.#{$button}-outline-false {
    @apply text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-200 dark:bg-gray-600/10 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700;
}

.#{$button}-color-default.#{$button}-link-false.#{$button}-ghost-true.#{$button}-outline-false {
    @apply text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-700;
}

.#{$button}-color-default.#{$button}-link-false.#{$button}-outline-true.#{$button}-ghost-false {
    @apply text-gray-700 border border-gray-700 hover:text-white hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:border-gray-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-500 dark:focus:ring-gray-800;
}

.#{$button}-color-default.#{$button}-link-false.#{$button}-disabled-true {
    @apply text-white bg-gray-400 cursor-not-allowed pointer-events-none dark:bg-gray-500;
}

.#{$button}-color-default.#{$button}-link-true.#{$button}-ghost-false.#{$button}-outline-false {
    @apply text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-700;
}