@import '../vars.css';

.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);

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

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

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

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

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

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

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

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

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

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

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

    &.transparent {
        color: var(--button-inverted-transparent-mobile-disabled-color);
    }

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