:root {
    --button-inverted-primary-hint-color: var(--color-light-text-secondary);
    --button-inverted-primary-mobile-base-bg-color: var(--color-light-accent-secondary-inverted);
    --button-inverted-primary-mobile-hover-bg-color: var(
        --color-light-accent-secondary-inverted-hover
    );
    --button-inverted-primary-mobile-active-bg-color: var(
        --color-light-accent-secondary-inverted-press
    );
    --button-inverted-primary-mobile-color: var(--color-light-text-primary);
    --button-inverted-primary-mobile-disabled-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-primary-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
    --button-inverted-secondary-mobile-base-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-secondary-mobile-active-bg-color: var(
        --color-light-neutral-translucent-100-inverted-press
    );
    --button-inverted-secondary-mobile-disabled-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-secondary-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
    --button-inverted-outlined-mobile-disabled-border-color: var(
        --color-light-neutral-translucent-500-inverted
    );
    --button-inverted-outlined-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
    --button-inverted-transparent-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
    --button-inverted-text-mobile-active-color: var(--color-light-text-primary-inverted-press);
    --button-inverted-text-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-translucent-1300);
    --button-inverted-accent-hint-color: currentColor;
    --button-mobile-inverted-primary-hint-color: var(--button-inverted-primary-hint-color);
    --button-mobile-inverted-accent-hint-color: var(--button-inverted-accent-hint-color);
}

.accent:not([disabled]) .hint {
        color: var(--button-mobile-inverted-accent-hint-color);
    }

.primary {
    color: var(--button-inverted-primary-mobile-color);
    background-color: var(--button-inverted-primary-mobile-base-bg-color);
}

.primary:not([disabled]) .hint {
        color: var(--button-mobile-inverted-primary-hint-color);
    }

@media (hover: hover) {
        .primary:hover {
            background-color: var(--button-inverted-primary-mobile-hover-bg-color);
        }
    }

.primary:active {
        background-color: var(--button-inverted-primary-mobile-active-bg-color);
    }

.primary > .loader {
        color: var(--button-spinner-inverted-primary-mobile-color);
    }

.secondary {
    background-color: var(--button-inverted-secondary-mobile-base-bg-color);
}

.secondary:active {
        background-color: var(--button-inverted-secondary-mobile-active-bg-color);
    }

.text:active {
        color: var(--button-inverted-text-mobile-active-color);
    }

.component.primary[disabled] {
        color: var(--button-inverted-primary-mobile-disabled-color);
        background-color: var(--button-inverted-primary-mobile-disabled-bg-color);
    }

.component.primary.loading[disabled] {
            color: var(--button-inverted-primary-mobile-color);
            background-color: var(--button-inverted-primary-mobile-base-bg-color);
        }

.component.secondary[disabled] {
        color: var(--button-inverted-secondary-mobile-disabled-color);
        background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
    }

.component.outlined[disabled] {
        color: var(--button-inverted-outlined-mobile-disabled-color);
        border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
    }

.component.transparent[disabled] {
        color: var(--button-inverted-transparent-mobile-disabled-color);
    }

.component.text[disabled] {
        color: var(--button-inverted-text-mobile-disabled-color);
    }