.root {
    border: none;
    border-radius: var(--radius200);
    cursor: pointer;
}

.size {
    &--medium {
        height: 40px;
        padding: 0 24px;

        &.isIconType {
            padding: 0 12px;
        }
    }
    &--small {
        height: 32px;
        padding: 0 16px;

        &.isIconType {
            padding: 0 8px;
        }
    }
}

.variant {
    &--primary {
        background-color: var(--backgroundBrandPrimary);
        color: var(--textBrandOnBrandPrimary);

        &:hover {
            background-color: var(--backgroundBrandPrimaryHover);
            color: var(--textBrandOnBrandPrimary);
        }

        &.danger {
            background-color: var(--backgroundDangerPrimary);
            color: var(--textDangerOnDangerPrimary);

            &:hover {
                background-color: var(--backgroundDangerPrimaryHover);
            }
        }

        &.disabled {
            background-color: var(--backgroundDisabledPrimary);
            color: var(--textDisabledOnDisabledPrimary);
        }
    }
    &--secondary {
        background-color: var(--backgroundBrandTertiary);
        color: var(--textBrandOnBrandTertiary);

        &:hover {
            background-color: var(--backgroundBrandTertiaryHover);
        }

        &.danger {
            background-color: var(--backgroundDangerTertiary);
            color: var(--textDangerOnDangerTertiary);

            &:hover {
                background-color: var(--backgroundDangerTertiaryHover);
            }
        }

        &.disabled {
            background-color: var(--backgroundDisabledPrimary);
            color: var(--textDisabledOnDisabledPrimary);
        }
    }
    &--text {
        background-color: var(--backgroundDefaultPrimary);
        color: var(--textBrandPrimary);

        &:hover {
            background-color: var(--backgroundBrandTertiaryHover);
            color: var(--textBrandOnBrandTertiary);
        }

        &.danger {
            color: var(--textDangerPrimary);

            &:hover {
                background-color: var(--backgroundDangerTertiaryHover);
                color: var(--textDangerOnDangerTertiary);
            }
        }

        &.disabled {
            background-color: var(--backgroundDefaultPrimary);
            color: var(--textDisabledPrimary);
        }
    }
}

.disabled {
    pointer-events: none;
    cursor: default;
}