.button {
    width: fit-content;
    height: fit-content;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-medium);
}

    .button .button-content {
        display: flex;
        flex-direction: row;
        gap: var(--size-spacing-8);
        flex-wrap: nowrap;
        height: fit-content;
    }


    .button p {
        font-weight: 600;
        display: flex;
        align-items: center;
        user-select: none;
        position: relative;
    }


    /* ===== MEDIUM ===== */

    .button.medium {
        border-radius: var(--size-radius-base);
        padding: var(--size-spacing-6) var(--size-spacing-12);
    }

        .button.medium.only-icon {
            padding: var(--size-spacing-6);
        }

        .button.medium .icon-mask {
            --icon-width: 20px;
            --icon-height: 20px;
        }

    /* ===== SMALL ===== */

    .button.small {
        border-radius: var(--size-radius-s);
        padding: var(--size-spacing-4) var(--size-spacing-8);
    }

        .button.small.only-icon {
            padding: var(--size-spacing-4);
        }

        .button.small .icon-mask {
            --icon-width: 16px;
            --icon-height: 16px;
        }


    /* ===== PRIMARY ===== */

    .button.primary {
        background-color: rgb(var(--color-primary-500-rgb));
        box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.10);
    }

        .button.primary .icon-mask {
            --icon-color: rgb( var(--color-primary-0-rgb));
        }

        .button.primary p {
            color: rgb( var(--color-primary-0-rgb));
        }


        .button.primary.active:hover {
            background-color: rgb( var(--color-primary-600-rgb));
        }

        .button.primary.active:active,
        .button.primary.active.pressed {
            background-color: rgb( var(--color-primary-700-rgb));
        }

        .button.primary.inactive {
            background-color: rgb( var(--color-primary-200-rgb));
        }

    /* ===== SECONDARY ===== */

    .button.secondary {
        background-color: rgb(var(--color-secondary-500-rgb));
        box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.10);
    }

        .button.secondary .icon-mask {
            --icon-color: rgb( var(--color-neutral-900-rgb));
        }

        .button.secondary p {
            color: rgb( var(--color-neutral-900-rgb));
        }


        .button.secondary.active:hover {
            background-color: rgb(var(--color-secondary-550-rgb));
        }

        .button.secondary.active:active,
        .button.secondary.active.pressed {
            background-color: rgb(var(--color-secondary-600-rgb));
        }

        .button.secondary.inactive .icon-mask {
            --icon-color: rgb( var(--color-neutral-300-rgb));
        }


        .button.secondary.inactive p {
            color: rgb( var(--color-neutral-300-rgb));
        }


    /* ===== SHADED ===== */

    .button.shaded {
        background-color: var(--color-mask-shade-0);
    }

        .button.shaded .icon-mask {
            --icon-color: rgb(var(--color-neutral-900-rgb));
        }

        .button.shaded p {
            color: rgb(var(--color-neutral-900-rgb));
        }


        .button.shaded.active:hover {
            background-color: var(--color-mask-shade-5);
        }

        .button.shaded.active:active,
        .button.shaded.active.pressed {
            background-color: var(--color-mask-shade-10);
        }

        .button.shaded.inactive .icon-mask {
            --icon-color: rgb( var(--color-neutral-300-rgb));
        }

        .button.shaded.inactive p {
            color: rgb( var(--color-neutral-300-rgb));
        }

    /* ===== TINTED ===== */

    .button.tinted {
        background-color: var(--color-mask-tint-0);
    }

        .button.tinted .icon-mask {
            --icon-color: rgb( var(--color-neutral-900-rgb));
        }

        .button.tinted p {
            color: rgb( var(--color-neutral-900-rgb));
        }


        .button.tinted.active:hover {
            background-color: var(--color-mask-tint-50);
        }

        .button.tinted.active:active,
        .button.tinted.active.pressed {
            background-color: var(--color-mask-tint-90);
        }

        .button.tinted.inactive .icon-mask {
            --icon-color: rgb( var(--color-neutral-300-rgb));
        }

        .button.tinted.inactive p {
            color: rgb( var(--color-neutral-300-rgb));
        }

    /* ===== ERROR ===== */

    .button.error {
        background-color: rgb(var(--color-red-500-rgb));
    }

        .button.error .icon-mask {
            --icon-color: rgb(var(--color-red-0-rgb));
        }

        .button.error p {
            color: rgb(var(--color-red-0-rgb));
        }


        .button.error.active:hover {
            background-color: rgb(var(--color-red-600-rgb));
        }

        .button.error.active:active,
        .button.error.active.pressed {
            background-color: rgb(var(--color-red-700-rgb));
        }

        .button.error.inactive {
            background-color: rgb( var(--color-red-200-rgb));
        }