/**
 * Dailymotion Pro Admin Buttons
 * ------------------------------
 * Base class: .btn
 * Variants: .btn-primary, .btn-secondary, .btn-tertiary, , .btn-branded, .btn-ghost
 * States: :hover, :focus-visible, :active, [disabled], .is-disabled, .dm-pro--button-processing
 * Notes:
 *  - Visuals preserved; rules refactored with modern nested CSS for clarity and scoping
 *  - Uses CSS variables from b1-tokens.css
 */


.btn,
a.btn {
    display: inline-block;

    width: var(--button-width);
    height: var(--button-height);
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    border: var(--button-border);

    line-height: var(--button-line-height);
    font-size: var(--button-font-size);
    font-family: var(--button-font-family);
    text-decoration: none;
    color: var(--button-color);

    background-color: var(--button-surface-color);
    transition: var(--button-transition);
    cursor: pointer;
    text-align: center;

    /* Focus and active */

    &:hover {
        --button-surface-color: var(--button-surface-hover);
        --button-color: var(--button-color-hover);
    }

    &:focus-visible {
        outline: var(--interaction-color) 2px solid;
        border: 1px solid #fff;
    }

    &:active {
        --button-surface-color: var(--interaction-color);
        --button-color: #fff;
    }


    /* Sizing */

    &.btn-width-md {
        --button-width: var(--button-width-md);
    }

    &.btn-width-full {
        --button-width: var(--button-width-full);
    }

}

/* Primary */

.btn-primary {
    --button-surface-color: var(--button-primary-surface);
    --button-color: var(--button-primary-color);

    &:hover {
        --button-surface-color: var(--button-primary-hover);
        --button-color: var(--button-primary-color-hover);
    }
}

/* Anchor-specific sizing kept from legacy */

a.btn-primary {
    height: 22px;
    font-weight: 400;

    &:hover {
        --button-surface-color: var(--button-primary-hover);
        --button-color: var(--button-primary-color-hover);
    }
}

/* Secondary */

.btn-secondary, a.btn-secondary {
    --button-surface-color: var(--button-secondary-surface);
    --button-border: var(--button-secondary-border);
    --button-color: var(--button-secondary-color);
    font-weight: 700;

    &:hover {
        --button-surface-color: var(--button-secondary-hover);
        --button-color-hover: var(--button-secondary-color-hover);
    }
}

.btn-tertiary {
    --button-surface-color: var(--button-tertiary-surface);
    --button-border: var(--button-tertiary-border);
    --button-color: var(--button-tertiary-color);
    font-weight: 700;

    &:hover {
        --button-surface-color: var(--button-tertiary-hover);
        --button-color-hover: var(--button-tertiary-color-hover);
    }
}

a.btn-tertiary:hover {
    --button-surface-color: var(--button-tertiary-hover);
}

.btn-icon, a.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    svg {
        flex-shrink: 0;
        fill: currentColor;
    }
}

.btn-branded {
    --button-surface-color: var(--button-branded-surface);
    &:hover {
        --button-surface-color: var(--button-branded-hover);
    }
}

.input-group--wrapper .btn.search-btn {
    --button-padding: 6px 9px;
    svg {
        width: 24px;
        height: 24px;
    }
}

/* Ghost */

.btn-ghost {
    --button-padding: 4px;
    --button-surface-color: var(--button-ghost-surface);
    --button-color: var(--button-ghost-color);
    border: var(--button-ghost-border);
    font-weight: 700;

    &.button-icon svg {
        margin-right: 12px;
    }

    /* Keep ghost transparent on active unless a variant overrides */
    &:active {
        --button-surface-color: transparent;
        --button-color: var(--button-ghost-color);
    }

    &:hover {
        --button-surface-color: var(--button-ghost-hover);
        --button-color-hover: var(--button-ghost-color);
    }
}

/* Popup close button (ghost-like) */

.btn.popup-close-button,
a.btn.popup-close-button {
    --button-surface-color: transparent;
    border: 0;
    padding: 0;
    width: auto;
    height: 20px;
    position: absolute;
    right: 0;
    color: var(--grey-05);

    &:active {
        color: #fff;
    }
}


/* Loading state spinner */

.btn.dm-pro--button-processing,
a.btn.dm-pro--button-processing {
    position: relative; /* anchor spinner positioning */
    pointer-events: none;

    &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: button-spinner 0.8s linear infinite;
    }
}

/* Disabled state */

.btn[disabled],
.btn.is-disabled,
a.btn.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

@keyframes button-spinner {
    to {
        transform: rotate(360deg);
    }
}