/* =========================
   FLUENT BUTTON BASE
========================= */

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

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

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

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

    text-decoration: none !important;
    border: 1px solid transparent;

    cursor: pointer;

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

/* =========================
   STRUCTURE
========================= */

.fluent-button__content {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-xs);
}

.fluent-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: inherit;
}

.fluent-button__text {
    display: inline-flex;
    align-items: center;
}

/* =========================
   ICON POSITION
========================= */

.fluent-button.is-icon--top {
    flex-direction: column;
}

.fluent-button.is-icon--bottom {
    flex-direction: column-reverse;
}

/* =========================
   PRIMARY
========================= */

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

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

/* Fluent behavior: focus/active */
.fluent-button--primary:active {
    background: var(--ms-color-primary-active);
}

/* =========================
   OUTLINE
========================= */

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

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

/* =========================
   SUBTLE
========================= */

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

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

/* =========================
   GHOST
========================= */

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

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

/* =========================
   SUCCESS
========================= */

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

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

/* =========================
   DANGER
========================= */

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

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

/* =========================
   WARNING
========================= */

.fluent-button--warning {
    background: var(--ms-color-warning);
    color: var(--ms-color-neutral-900);
}

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

/* =========================
   INFO
========================= */

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

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

/* =========================
   HOVER GLOBAL SAFETY
========================= */

.fluent-button:hover,
.fluent-button:focus {
    text-decoration: none !important;
    outline: none;
}

/* =========================
   DISABLED
========================= */

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