.fluent-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--ms-space-sm);

    padding: var(--ms-space-xs) var(--ms-space-md);
    border-radius: var(--ms-radius-md);

    font-size: var(--ms-font-size-body);
    font-weight: var(--ms-font-weight-medium);

    line-height: var(--ms-line-height-normal);

    border: 1px solid transparent;
    background-color: transparent;

    cursor: pointer;

    transition:
        background-color var(--ms-motion-fast) var(--ms-ease),
        border-color var(--ms-motion-fast) var(--ms-ease),
        color var(--ms-motion-fast) var(--ms-ease);

    user-select: none;
    text-decoration: none;
}

.fluent-button-primary {
    background-color: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);
}

.fluent-button-primary:hover {
    background-color: var(--ms-color-primary-hover);
}

.fluent-button-primary:active {
    background-color: var(--ms-color-primary-active);
}

.fluent-button-secondary {
    background-color: var(--ms-color-neutral-100);
    color: var(--ms-color-text-primary);
}

.fluent-button-secondary:hover {
    background-color: var(--ms-color-neutral-200);
}

.fluent-button-outline {
    background-color: transparent;
    border-color: var(--ms-color-border-default);
    color: var(--ms-color-text-primary);
}

.fluent-button-outline:hover {
    background-color: var(--ms-color-bg-hover);
}

.fluent-button-subtle {
    background-color: transparent;
    color: var(--ms-color-text-primary);
}

.fluent-button-subtle:hover {
    background-color: var(--ms-color-bg-hover);
}

.fluent-button-subtle:active {
    background-color: var(--ms-color-bg-active);
}

.fluent-button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 var(--ms-focus-ring-width) var(--ms-color-bg-canvas),
        0 0 0 calc(var(--ms-focus-ring-width) + var(--ms-focus-ring-offset))
        var(--ms-focus-ring-color);
}

.fluent-button:disabled {
    opacity: var(--ms-opacity-disabled);
    cursor: not-allowed;
    background-color: var(--ms-color-bg-disabled);
    color: var(--ms-color-text-disabled);
}

.fluent-button .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*Variant untuk fluent-button-tab*/
.fluent-button-tab {
    font-size: var(--ms-font-size-label);
    font-weight: var(--ms-font-weight-semi-bold);
    color: var(--ms-color-text-secondary);
}

.fluent-button-tab.active {
    color: var(--ms-color-primary);
    background: var(--ms-color-primary-subtle);
}