:root {
    --rt-button-radius: var(--rt-ui-radius);
    --rt-button-height: var(--rt-ui-height);
    --rt-button-font-size: 14px;
    --rt-button-border: var(--rt-ui-border);

    --rt-button-default: linear-gradient(to bottom, rgba(150, 150, 150, 0.08), rgba(100, 100, 100, 0.16));
    --rt-button-default-hover: linear-gradient(to bottom, rgba(150, 150, 150, 0.13), rgba(100, 100, 100, 0.22));
    --rt-button-default-active: linear-gradient(to bottom, rgba(100, 100, 100, 0.18), rgba(70, 70, 70, 0.28));

    --rt-button-primary: linear-gradient(to bottom, #a259c4, #6b2fa0);
    --rt-button-primary-hover: linear-gradient(to bottom, #b06dcc, #7a3db0);
    --rt-button-primary-active: linear-gradient(to bottom, #6b2fa0, #4e1f78);
    --rt-button-primary-border: #5a2590;

    --rt-button-success: linear-gradient(to bottom, #3dbb5a, #1a8c38);
    --rt-button-success-hover: linear-gradient(to bottom, #4dcc6a, #229944);
    --rt-button-success-active: linear-gradient(to bottom, #1a8c38, #126628);
    --rt-button-success-border: #157a2f;

    --rt-button-warning: linear-gradient(to bottom, #f5a623, #d4820a);
    --rt-button-warning-hover: linear-gradient(to bottom, #f7b840, #e08f10);
    --rt-button-warning-active: linear-gradient(to bottom, #d4820a, #a65f06);
    --rt-button-warning-border: #b86e08;

    --rt-button-danger: linear-gradient(to bottom, #f04540, #be1f1f);
    --rt-button-danger-hover: linear-gradient(to bottom, #f75d58, #cc2525);
    --rt-button-danger-active: linear-gradient(to bottom, #be1f1f, #8c1515);
    --rt-button-danger-border: #a01818;

    --rt-button-subscribe: linear-gradient(to bottom, #b478f1, #7c2bd9);
    --rt-button-subscribe-hover: linear-gradient(to bottom, #c28cfa, #8c3ee6);
    --rt-button-subscribe-active: linear-gradient(to bottom, #7c2bd9, #5a1db0);
    --rt-button-subscribe-border: #5e1fb3;
    --rt-button-subscribe-inset: inset 0 1px 0 rgba(255, 255, 255, 0.25);

    --rt-button-subscribed: linear-gradient(to bottom, #ebebeb, #d8d8d8);
    --rt-button-subscribed-hover: linear-gradient(to bottom, #f0f0f0, #dedede);
    --rt-button-subscribed-active: linear-gradient(to bottom, #d8d8d8, #c5c5c5);
    --rt-button-subscribed-border: var(--rt-ui-border);
    --rt-button-subscribed-color: #333;
    --rt-button-subscribed-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

    --rt-button-voted: linear-gradient(to bottom, #c990f5, #9645e0);
    --rt-button-voted-hover: linear-gradient(to bottom, #d4a0f8, #a455ea);
    --rt-button-voted-active: linear-gradient(to bottom, #9645e0, #7a30be);
    --rt-button-voted-border: #7a30be;
    --rt-button-voted-shadow: rgba(0, 0, 0, 0.08);
    --rt-button-voted-inset: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-wrap: nowrap;
    padding: 0 0.5em;
    color: var(--rt-text-primary);
    font-size: var(--rt-button-font-size);
    height: var(--rt-button-height);
    border: 1px solid var(--rt-button-border);
    border-radius: var(--rt-button-radius);
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.button--default {
    background: var(--rt-button-default);
}

.button--default:not(:disabled):hover {
    background: var(--rt-button-default-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button--default:not(:disabled):active {
    background: var(--rt-button-default-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.button--primary {
    background: var(--rt-button-primary);
    color: var(--rt-text-inverse);
    border-color: var(--rt-button-primary-border);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.button--primary:not(:disabled):hover {
    background: var(--rt-button-primary-hover);
    border-color: var(--rt-button-primary-border);
}

.button--primary:not(:disabled):active {
    background: var(--rt-button-primary-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.button--success {
    background: var(--rt-button-success);
    color: var(--rt-text-inverse);
    border-color: var(--rt-button-success-border);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button--success:not(:disabled):hover {
    background: var(--rt-button-success-hover);
    border-color: var(--rt-button-success-border);
}

.button--success:not(:disabled):active {
    background: var(--rt-button-success-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button--warning {
    background: var(--rt-button-warning);
    color: var(--rt-text-inverse);
    border-color: var(--rt-button-warning-border);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button--warning:not(:disabled):hover {
    background: var(--rt-button-warning-hover);
    border-color: var(--rt-button-warning-border);
}

.button--warning:not(:disabled):active {
    background: var(--rt-button-warning-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button--danger {
    background: var(--rt-button-danger);
    color: var(--rt-text-inverse);
    border-color: var(--rt-button-danger-border);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.button--danger:not(:disabled):hover {
    background: var(--rt-button-danger-hover);
    border-color: var(--rt-button-danger-border);
}

.button--danger:not(:disabled):active {
    background: var(--rt-button-danger-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.button--subscribe {
    background: var(--rt-button-subscribe);
    border: 1px solid var(--rt-button-subscribe-border);
    border-radius: var(--rt-button-radius);
    color: var(--rt-text-inverse);
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: var(--rt-button-subscribe-inset);
}

.button--subscribe:hover {
    background: var(--rt-button-subscribe-hover);
}

.button--subscribe:active {
    background: var(--rt-button-subscribe-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.button--subscribed {
    background: var(--rt-button-subscribed);
    border: 1px solid var(--rt-button-subscribed-border);
    border-radius: var(--rt-button-radius);
    color: var(--rt-button-subscribed-color);
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--rt-button-subscribed-inset);
}

.button--subscribed:hover {
    background: var(--rt-button-subscribed-hover);
}

.button--subscribed:active {
    background: var(--rt-button-subscribed-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.button--voted {
    background: var(--rt-button-voted);
    border-color: var(--rt-button-voted-border);
}

.button--voted:not(:disabled):hover {
    background: var(--rt-button-voted-hover);
    box-shadow: 0 2px 5px var(--rt-button-voted-shadow);
}

.button--voted:not(:disabled):active {
    background: var(--rt-button-voted-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.button__text {
    margin-left: 5px;
}

.button--sm {
    height: 24px;
    font-size: 12px;
    padding: 0 0.4em;
}

.button--lg {
    height: 38px;
    font-size: 16px;
    padding: 0 0.7em;
}

.button--xl {
    height: 46px;
    font-size: 18px;
    padding: 0 1em;
}

.button--tab {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid var(--rt-border-subtle);
    border-radius: 0;
    background: linear-gradient(
        to bottom,
        var(--color-gray-100),
        var(--color-gray-200)
    );
    color: var(--color-gray-600);
    padding: 0 12px;
    height: 34px;
    cursor: pointer;
}

.button--tab:hover {
    background: var(--color-gray-200);
}

.button--tab.active {
    background: var(--color-white);
    color: var(--rt-text-primary);
}

.button--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

.button-add-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--rt-button-border);
    border-radius: 0;
    font-size: 15px;
    background: var(--color-white);
    cursor: pointer;
}

.button-add-compact:hover {
    background: var(--color-gray-50);
}

.button-link {
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.button-link:hover {
    color: var(--color-gray-700);
}