.button {
    @apply inline-block mb-4 relative;

    > span {
        @apply inline-block relative font-semibold border-solid rounded cursor-pointer leading-5 top-0 left-0 px-8 select-none bg-black text-white border-black w-full;

        z-index: 0;
        transition: top 50ms, left 50ms, background-color 100ms,
            border-color 100ms;
        font-size: 1rem;
        border-width: 1px;
        padding-top: 15px;
        padding-bottom: 15px;
        z-index: 1;

        .icon + .text,
        .text + .icon {
            @apply ml-2;
        }
    }

    .text {
        display: inline-block;

        &::first-letter {
            text-transform: capitalize;
        }
    }

    &::after {
        @apply block absolute top-1 left-1 w-full h-full border-solid rounded;
        transition: border-color 100ms;
        content: '';
        z-index: 0;
        border-width: 1px;
    }

    &.button-noframe {
        &::after {
            display: none;
        }
    }

    &,
    &:hover {
        @apply no-underline;
    }

    &:active {
        > span {
            @apply top-1 left-1;
        }
    }

    &.button-white {
        > span {
            @apply bg-white text-black border-gray-900;
        }

        &::after {
            @apply border-white;
        }

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }

    &.button-white-sm {
        > span {
            @apply bg-white text-black border-gray-900 p-1;
        }

        &::after {
            @apply border-white;
        }

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }

    &.button-red,
    .button-red-submit {
        > span {
            @apply bg-red text-white border-red;
        }

        &::after {
            @apply border-red;
        }

        &:hover {
            > span {
                @apply bg-red-600 border-red-600;
            }

            &::after {
                @apply border-red-600;
            }
        }
    }

    &.button-gray {
        > span {
            @apply bg-gray text-black border-gray;
        }

        &::after {
            @apply border-gray;
        }

        &:hover {
            > span {
                @apply bg-gray-600 border-gray-600;
            }

            &::after {
                @apply border-gray-600;
            }
        }
    }

    &.button-green {
        > span {
            @apply bg-green text-white border-green;
        }

        &::after {
            @apply border-green;
        }

        &:hover {
            > span {
                @apply bg-green-600 border-green-600;
            }

            &::after {
                @apply border-green-600;
            }
        }
    }

    &,
    &.button-black {
        > span {
            @apply bg-black text-white border-black;
        }

        &::after {
            @apply border-black;
        }

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }

    &.button-white-border {
        > span {
            @apply bg-transparent text-white border-white;
        }

        &::after {
            @apply border-none;
        }

        &:hover {
            > span {
            }

            &::after {
            }
        }
    }
}