@layer base {
    .btn-i-base {
        @apply font-semibold;
        @apply flex items-center justify-center;
        @apply whitespace-nowrap flex-shrink-0;

        transition: background-color 0.1s ease-in;

        & > .c-icon {
            &:first-child {
                @apply mr-12;
            }
            &:last-child {
                @apply ml-12;
            }
        }

        & > .kb-shortcut {
            @apply font-mono font-bold;
            @apply ml-8;
            line-height: 1;
        }
    }

    .btn-i-filled {
        &.btn-xs {
            box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.2);
            &:hover {
                box-shadow: 0px 2px 4px rgba(var(--shadowColorMain), 0.4);
            }
        }
        &.btn-s {
            box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.3);
            &:hover {
                box-shadow: 0px 3px 5px rgba(var(--shadowColorMain), 0.5);
            }
        }
        &.btn-m {
            box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.4);
            &:hover {
                box-shadow: 0px 4px 6px rgba(var(--shadowColorMain), 0.6);
            }
        }
        &.btn-l {
            box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.4);
            &:hover {
                box-shadow: 0px 4px 7px rgba(var(--shadowColorMain), 0.6);
            }
        }
    }

    .btn-primary {
        @apply btn-i-filled;
        @apply bg-purple text-white;
        @apply border-1 border-primaryBtnBorder;

        & .c-icon {
            filter: var(--white-filter);
        }
        &:not(:disabled):not(.--disabled):hover {
            @apply bg-purpleDarkened;
        }
    }

    .btn-secondary {
        @apply btn-i-filled;
        color: var(--colorPurpleToBrightPurple);
        background: var(--backgroundColorBtnSecondary);

        @apply border-1;
        border-color: var(--colorPurpleToBrightPurple);
        & > .c-icon {
            filter: var(--purple-to-bright-purple-filter);
        }
        &:not(:disabled):not(.--disabled):hover {
            background: var(--backgroundColorBtnSecondaryHover);
        }
    }

    .btn-enhanced {
        @apply btn-i-filled;
        @apply bg-backgroundColorA text-textColor2;
        @apply border-1 border-btnBorder;
        & > .c-icon {
            filter: var(--textColor2-filter);
        }
        &:not(:disabled):not(.--disabled):hover {
            background: rgb(96, 79, 205, 0.02);
            &.btn-l {
                background: rgb(96, 79, 205, 0.05);
                box-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.6);
            }
        }
    }

    .btn-slightly-enhanced {
        @apply btn-i-filled;
        @apply bg-backgroundColorA text-textColor2;
        @apply border-1 border-borderColor4;
        & > .c-icon {
            filter: var(--textColor2-filter);
        }
        &:not(:disabled):not(.--disabled):hover {
            background: rgb(96, 79, 205, 0.02);
            &.btn-l {
                background: rgb(96, 79, 205, 0.05);
                box-shadow: 0px 4px 8px rgba(var(--shadowColorMain), 0.3);
            }
        }
    }

    .btn-default {
        @apply text-textColor2;
        @apply border-1 border-btnBorder;
        & > .c-icon {
            filter: var(--textColor2-filter);
        }
        &:not(:disabled):not(.--disabled):hover {
            background: rgba(0, 0, 0, 0.05);
        }
    }

    .btn-warning {
        @apply btn-i-filled;
        @apply bg-warning text-white;
        @apply border-1 border-warningBtnBorder;

        & .c-icon {
            filter: var(--white-filter);
        }
        &:not(:disabled):not(.--disabled):hover {
            /* TODO: Darker color */
        }
    }

    .btn-alert {
        @apply bg-alert text-white;
        @apply border-1 border-alertBtnBorder;

        & .c-icon {
            filter: var(--white-filter);
        }
        &:not(:disabled):not(.--disabled):hover {
            /* TODO: Darker color */
        }
    }

    .btn-link {
        @apply btn-i-base;
        @apply text-linkColor;
        & .c-icon {
            filter: var(--linkColor-filter);
            height: 18px;
            width: 18px;
        }
    }

    .btn-keyboard-shortcut {
        @apply flex items-center;
        @apply py-6 px-12;

        & > :first-child {
            @apply mr-12;
        }
        & .--kb {
            @apply py-6 px-8;
            @apply border-1 border-borderColor5 rounded-5;
            @apply text-textColor6;
            box-shadow: 0px 1px 0px 1px rgba(var(--shadowColorKeystroke), 0.73);

            & .c-icon {
                height: 12px;
                width: 12px;
                @apply filter-textColor6;
            }
        }
        & .--hint {
            @apply text-textColor6 font-semibold;
        }
    }

    .btn-xxs {
        @apply btn-i-base;
        height: 24px;
        @apply px-12 rounded-5;
        @apply text-14;

        & > .c-icon {
            height: 14px;
            width: 14px;
        }
        & > .c-icon {
            &:first-child {
                @apply mr-6;
            }
            &:last-child {
                @apply ml-6;
            }
        }
        & > .kb-shortcut {
            @apply text-13;
        }
    }
    .btn-xs {
        @apply btn-i-base;
        height: 32px;
        @apply px-16 rounded-5;
        @apply text-14;

        & > .c-icon {
            height: 14px;
            width: 14px;
        }
        & > .kb-shortcut {
            @apply text-13;
        }
    }
    .btn-s {
        @apply btn-i-base;
        height: 40px;
        @apply px-16 rounded-5;
        @apply text-15;
        line-height: 16px;

        & > .c-icon {
            height: 16px;
            width: 16px;
        }

        & > .kb-shortcut {
            @apply text-13;
            line-height: 13px;
        }
    }
    .btn-m {
        @apply btn-i-base;
        height: 48px;
        @apply px-20 rounded-5;
        @apply sm:text-16 text-14;

        & > .c-icon {
            height: 18px;
            width: 18px;
        }

        & > .kb-shortcut {
            @apply text-14;
        }
    }
    .btn-l {
        @apply btn-i-base;
        height: 56px;
        @apply px-24 rounded-8;
        @apply text-18;

        & > .c-icon {
            height: 20px;
            width: 20px;
        }

        & > .kb-shortcut {
            @apply text-15;
        }
    }

    [class^="btn"]:disabled {
        /* This needs to be important to override any previous fade-in animations */
        opacity: 0.5 !important;
        cursor: not-allowed;
    }
}
