/* ============================================================
   COMPONENTS: BUTTONS
   Consistent button system across Intranet & Portal
   ============================================================ */

.ds-btn {
    /* Base structure */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);

    /* Typography */
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    line-height: var(--ds-line-height-normal);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    /* Spacing */
    padding: var(--ds-padding-btn);

    /* Visual */
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;

    /* Interaction */
    transition: var(--ds-transition-color);

    /* Constraints */
    min-width: 70px;
    max-width: 200px;
}

.ds-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}

.ds-btn:disabled,
.ds-btn.disabled {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* ========================================
   SEMANTIC BUTTON VARIANTS
   Each button represents a specific action with appropriate color
   ======================================== */

/* Save/Submit (Brand Red) - Primary action */
.ds-btn-save,
.ds-btn-primary,
.ds-btn-submit {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}

.ds-btn-save:hover,
.ds-btn-primary:hover,
.ds-btn-submit:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    text-decoration: none;
}

.ds-btn-save:active,
.ds-btn-primary:active,
.ds-btn-submit:active {
    background-color: var(--ds-color-primary-active);
    border-color: var(--ds-color-primary-active);
}

/* Create/Add (Green) - Constructive action */
.ds-btn-create,
.ds-btn-success {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-create);
    border-color: var(--ds-color-create);
}

.ds-btn-create:hover,
.ds-btn-success:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-create-hover);
    border-color: var(--ds-color-create-hover);
    text-decoration: none;
}

.ds-btn-create:active,
.ds-btn-success:active {
    background-color: var(--ds-color-create-active);
    border-color: var(--ds-color-create-active);
}

/* Edit/Modify (Blue) - Modification action */
.ds-btn-edit,
.ds-btn-view,
.ds-btn-read {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-edit);
    border-color: var(--ds-color-edit);
}

.ds-btn-edit:hover,
.ds-btn-view:hover,
.ds-btn-read:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-edit-hover);
    border-color: var(--ds-color-edit-hover);
    text-decoration: none;
}

.ds-btn-edit:active,
.ds-btn-view:active,
.ds-btn-read:active {
    background-color: var(--ds-color-edit-active);
    border-color: var(--ds-color-edit-active);
}

/* Delete/Reject (Red/Danger) - Destructive action */
.ds-btn-delete,
.ds-btn-rejected,
.ds-btn-danger,
.ds-btn-failure {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-danger);
    border-color: var(--ds-color-danger);
}

.ds-btn-delete:hover,
.ds-btn-rejected:hover,
.ds-btn-danger:hover,
.ds-btn-failure:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-danger-hover);
    border-color: var(--ds-color-danger-hover);
    text-decoration: none;
}

.ds-btn-delete:active,
.ds-btn-rejected:active,
.ds-btn-danger:active,
.ds-btn-failure:active {
    background-color: var(--ds-brand-red-darker);
    border-color: var(--ds-brand-red-darker);
}

/* Export/Download (Brown) - Data extraction */
.ds-btn-export {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-export);
    border-color: var(--ds-color-export);
}

.ds-btn-export:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-export-hover);
    border-color: var(--ds-color-export-hover);
    text-decoration: none;
}

.ds-btn-export:active {
    background-color: var(--ds-color-export-active);
    border-color: var(--ds-color-export-active);
}

/* Send/Transmit (Teal) - Communication action */
.ds-btn-send {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-send);
    border-color: var(--ds-color-send);
}

.ds-btn-send:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-send-hover);
    border-color: var(--ds-color-send-hover);
    text-decoration: none;
}

.ds-btn-send:active {
    background-color: var(--ds-color-send-active);
    border-color: var(--ds-color-send-active);
}

/* Go/Run (Brand Red) - Execute/Proceed action */
.ds-btn-go,
.ds-btn-run {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}

.ds-btn-go:hover,
.ds-btn-run:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    text-decoration: none;
}

.ds-btn-go:active,
.ds-btn-run:active {
    background-color: var(--ds-color-primary-active);
    border-color: var(--ds-color-primary-active);
}

/* Back/Return (Charcoal) - Navigation back */
.ds-btn-back {
    color: var(--ds-text-inverse);
    background-color: var(--ds-gray-700);
    border-color: var(--ds-gray-700);
}

.ds-btn-back:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-gray-800);
    border-color: var(--ds-gray-800);
    text-decoration: none;
}

.ds-btn-back:active {
    background-color: var(--ds-gray-900);
    border-color: var(--ds-gray-900);
}

/* Close/Cancel/Archive (Gray) - Neutral dismissal or passive navigation */
.ds-btn-close,
.ds-btn-cancel,
.ds-btn-secondary,
.ds-btn-archive {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-secondary);
    border-color: var(--ds-color-secondary);
}

.ds-btn-close:hover,
.ds-btn-cancel:hover,
.ds-btn-secondary:hover,
.ds-btn-archive:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-secondary-hover);
    border-color: var(--ds-color-secondary-hover);
    text-decoration: none;
}

.ds-btn-close:active,
.ds-btn-cancel:active,
.ds-btn-secondary:active,
.ds-btn-archive:active {
    background-color: var(--ds-color-secondary-active);
    border-color: var(--ds-color-secondary-active);
}

/* Help/Info/Guide (Info Blue) - Documentation and information */
.ds-btn-help,
.ds-btn-info,
.ds-btn-guide {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-info);
    border-color: var(--ds-color-info);
}

.ds-btn-help:hover,
.ds-btn-info:hover,
.ds-btn-guide:hover {
    color: var(--ds-text-inverse);
    background-color: #0bb4d4;
    border-color: #0bb4d4;
    text-decoration: none;
}

.ds-btn-help:active,
.ds-btn-info:active,
.ds-btn-guide:active {
    background-color: #099bb8;
    border-color: #099bb8;
}

/* ========================================
   OUTLINE SEMANTIC VARIANTS
   Same semantics, transparent background
   ======================================== */

.ds-outline-btn-save,
.ds-outline-btn-primary,
.ds-outline-btn-submit {
    color: var(--ds-color-primary);
    background-color: transparent;
    border-color: var(--ds-color-primary);
}

.ds-outline-btn-save:hover,
.ds-outline-btn-primary:hover,
.ds-outline-btn-submit:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    text-decoration: none;
}

.ds-outline-btn-save:active,
.ds-outline-btn-primary:active,
.ds-outline-btn-submit:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary-active);
    border-color: var(--ds-color-primary-active);
}

.ds-outline-btn-create,
.ds-outline-btn-success {
    color: var(--ds-color-create);
    background-color: transparent;
    border-color: var(--ds-color-create);
}

.ds-outline-btn-create:hover,
.ds-outline-btn-success:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-create-hover);
    border-color: var(--ds-color-create-hover);
    text-decoration: none;
}

.ds-outline-btn-create:active,
.ds-outline-btn-success:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-create-active);
    border-color: var(--ds-color-create-active);
}

.ds-outline-btn-edit,
.ds-outline-btn-view,
.ds-outline-btn-read {
    color: var(--ds-color-edit);
    background-color: transparent;
    border-color: var(--ds-color-edit);
}

.ds-outline-btn-edit:hover,
.ds-outline-btn-view:hover,
.ds-outline-btn-read:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-edit-hover);
    border-color: var(--ds-color-edit-hover);
    text-decoration: none;
}

.ds-outline-btn-edit:active,
.ds-outline-btn-view:active,
.ds-outline-btn-read:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-edit-active);
    border-color: var(--ds-color-edit-active);
}

.ds-outline-btn-delete,
.ds-outline-btn-rejected,
.ds-outline-btn-danger,
.ds-outline-btn-failure {
    color: var(--ds-color-danger);
    background-color: transparent;
    border-color: var(--ds-color-danger);
}

.ds-outline-btn-delete:hover,
.ds-outline-btn-rejected:hover,
.ds-outline-btn-danger:hover,
.ds-outline-btn-failure:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-danger-hover);
    border-color: var(--ds-color-danger-hover);
    text-decoration: none;
}

.ds-outline-btn-delete:active,
.ds-outline-btn-rejected:active,
.ds-outline-btn-danger:active,
.ds-outline-btn-failure:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-brand-red-darker);
    border-color: var(--ds-brand-red-darker);
}

.ds-outline-btn-export {
    color: var(--ds-color-export);
    background-color: transparent;
    border-color: var(--ds-color-export);
}

.ds-outline-btn-export:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-export-hover);
    border-color: var(--ds-color-export-hover);
    text-decoration: none;
}

.ds-outline-btn-export:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-export-active);
    border-color: var(--ds-color-export-active);
}

.ds-outline-btn-send {
    color: var(--ds-color-send);
    background-color: transparent;
    border-color: var(--ds-color-send);
}

.ds-outline-btn-send:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-send-hover);
    border-color: var(--ds-color-send-hover);
    text-decoration: none;
}

.ds-outline-btn-send:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-send-active);
    border-color: var(--ds-color-send-active);
}

.ds-outline-btn-go,
.ds-outline-btn-run {
    color: var(--ds-color-primary);
    background-color: transparent;
    border-color: var(--ds-color-primary);
}

.ds-outline-btn-go:hover,
.ds-outline-btn-run:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    text-decoration: none;
}

.ds-outline-btn-go:active,
.ds-outline-btn-run:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-primary-active);
    border-color: var(--ds-color-primary-active);
}

.ds-outline-btn-back {
    color: var(--ds-gray-700);
    background-color: transparent;
    border-color: var(--ds-gray-700);
}

.ds-outline-btn-back:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-gray-800);
    border-color: var(--ds-gray-800);
    text-decoration: none;
}

.ds-outline-btn-back:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-gray-900);
    border-color: var(--ds-gray-900);
}

.ds-outline-btn-close,
.ds-outline-btn-cancel,
.ds-outline-btn-secondary,
.ds-outline-btn-archive {
    color: var(--ds-color-secondary);
    background-color: transparent;
    border-color: var(--ds-color-secondary);
}

.ds-outline-btn-close:hover,
.ds-outline-btn-cancel:hover,
.ds-outline-btn-secondary:hover,
.ds-outline-btn-archive:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-secondary-hover);
    border-color: var(--ds-color-secondary-hover);
    text-decoration: none;
}

.ds-outline-btn-close:active,
.ds-outline-btn-cancel:active,
.ds-outline-btn-secondary:active,
.ds-outline-btn-archive:active {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-secondary-active);
    border-color: var(--ds-color-secondary-active);
}

.ds-outline-btn-help,
.ds-outline-btn-info,
.ds-outline-btn-guide {
    color: var(--ds-color-info);
    background-color: transparent;
    border-color: var(--ds-color-info);
}

.ds-outline-btn-help:hover,
.ds-outline-btn-info:hover,
.ds-outline-btn-guide:hover {
    color: var(--ds-text-inverse);
    background-color: #0bb4d4;
    border-color: #0bb4d4;
    text-decoration: none;
}

.ds-outline-btn-help:active,
.ds-outline-btn-info:active,
.ds-outline-btn-guide:active {
    color: var(--ds-text-inverse);
    background-color: #099bb8;
    border-color: #099bb8;
}

/* Select (Outline Blue) - Selection action */
.ds-btn-select {
    color: var(--ds-color-edit);
    background-color: transparent;
    border-color: var(--ds-color-edit);
}

.ds-btn-select:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-edit);
    border-color: var(--ds-color-edit);
    text-decoration: none;
}

.ds-btn-select:active {
    background-color: var(--ds-color-edit-active);
    border-color: var(--ds-color-edit-active);
}

/* Accepted/Approved (Green) - Legacy alias for success */
.ds-btn-accepted {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-success);
    border-color: var(--ds-color-success);
}

.ds-btn-accepted:hover {
    color: var(--ds-text-inverse);
    background-color: var(--ds-color-success-hover);
    border-color: var(--ds-color-success-hover);
    text-decoration: none;
}

.ds-btn-accepted:active {
    background-color: var(--ds-green-darker);
    border-color: var(--ds-green-darker);
}