.btn {
    @apply bg-yellow-400 font-bold py-2 px-4 rounded cursor-pointer select-none mx-2 text-black flex flex-row;
    @apply hover:bg-yellow-300 hover:text-black hover:shadow-2xl hover:scale-105;
    transition: all 0.5s cubic-bezier(.2,3,.67,.6),
                background-color .1s ease-in-out,
                outline-width .1s ease-in-out,
                outline-color .1s ease-in-out;
    @apply active:scale-90;

    .btn__text {
        @apply inline-block;
    }
}

.btn-dropdown {
    @apply relative mx-2;

    >:nth-child(1) {
        @apply !mx-0;
    }

    >:nth-child(2) {
        @apply hidden absolute top-full left-1/2 -translate-x-1/2 bg-gray-800 list-none text-white rounded py-2 flex-col text-sm z-20;
    }

    &:hover,&:focus-within {
        >:nth-child(2) {
            @apply flex;
        }
    }
}

.btn-gray {
    @apply bg-gray-800 text-white;
}

.btn-text {
    @apply bg-transparent underline text-white;
    @apply hover:bg-transparent hover:outline hover:outline-1;

    .btn__text {
        @apply underline;
    }
}
