@tailwind components;

@layer components {

    .button {
        @apply relative items-center px-8 py-2 bg-cyan text-white rounded-md inline-block text-center;
        @apply hover:bg-cyan-hover;
        @apply transition duration-300;

        &--large {
            @apply px-8 py-4 text-lg;
        }
        &--cyan {
            @apply bg-cyan;
            @apply hover:bg-cyan-hover;
        }
        &--blue {
            @apply bg-blue;
            @apply hover:bg-blue-hover;
        }
        &--green {
            @apply bg-green-600;
            @apply hover:bg-green-700;
        }
        &--gray {
            @apply bg-gray-400;
            @apply hover:bg-gray-500;
        },
        &--stone {
            @apply bg-stone;
            @apply hover:bg-stone-hover;
        }
        &--stone-30 {
            @apply bg-stone-30 text-blue;
            @apply hover:bg-stone-30-hover;
        }
        &--icon {
            @apply p-1 text-blue bg-transparent;
            @apply hover:text-blue-hover hover:bg-transparent;
        }
        &--white {
            @apply bg-white border border-blue text-blue;
            @apply hover:bg-gray-300 hover:border-blue-hover hover:text-blue-hover;
        }
        &__spinner {
            @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;

            &, &:after {
                @apply h-6 w-6;
            }
            &:after {
                content: "";
                border-top: 3px solid rgba(255, 255, 255, 0.2);
                border-right: 3px solid rgba(255, 255, 255, 0.2);
                border-bottom: 3px solid rgba(255, 255, 255, 0.2);
                border-left: 3px solid #ffffff;
                animation: spinner 1.1s infinite linear;
                @apply block rounded-full;
            }
        }
        &__body {

            &--hidden {
                @apply invisible;
            }
        }
        &--text-left {
            @apply text-left;
        }
        &__text {
            @apply leading-none;

            &--small {
                @apply text-sm leading-none;
            }
        }
        &--block {
            @apply block;

            & + & {
                @apply mt-4;
            }
        }
        &__right-icon {
            @apply flex absolute w-5 inset-y-0 right-8 items-center;
        }
        &--disabled, &:disabled {
            @apply opacity-50 pointer-events-none;
        }
    }

    @-webkit-keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        }
        @keyframes spinner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    } 
    
}