/* ============================================================================
   06-COMPONENTS -> #ACTION
   ========================================================================= */

/**
 * Trigger an action such as moving and an interface component.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Action
 */

.action {
    --action-bg: transparent;
    --action-color: var(--text-color-primary);
    --action-border-color: transparent;
    --action-shadow: var(--shadow-xs);
    --action-border-radius: 50%;
    --action-border-width: var(--border-width);
    --action-font-size: #{deep-map-get($font-size, 'sm', 'font-size')};
    --action-font-weight: var(--font-weight-medium);
    --action-height: var(--space-10);
    --action-icon-size: var(--icon-size-md);
    --action-line-height: #{deep-map-get($font-size, 'sm', 'line-height')};
    --action-size: var(--space-8);
    --action-hover-bg: transparent;
    --action-hover-border-color: transparent;
    --action-hover-color: var(--text-color-primary);
    --action-active-bg: transparent;
    --action-active-border-color: transparent;
    --action-active-color: var(--text-color-primary);
    --action-disabled-bg: transparent;
    --action-disabled-border-color: transparent;
    --action-disabled-color: var(--text-color-tertiary);
    --action-focus-ring-color: transparent;
    --action-focus-ring-size: var(--space-1);
    
    @include transition(('background-color', 'box-shadow', 'color', 'opacity'));
    align-items: center;
    appearance: none;
    background-color: var(--action-bg);
    border: 0;
    border-radius: var(--action-border-radius);
    box-shadow: var(--action-shadow);
    color: var(--action-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--action-font-size);
    font-weight: var(--action-font-weight);
    height: var(--action-size);
    justify-content: center;
    justify-content: center;
    line-height: var(--action-line-height);
    outline: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width: var(--action-size);

    &::before {
        border: var(--action-border-width) solid var(--action-border-color);
        border-radius: var(--action-border-radius);
        content: '';
        height: 100%;
        inset: 0;
        opacity: .5;
        position: absolute;
        width: 100%;
        z-index: var(--z-index-10);
    }

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

    &:active {
        background-color: var(--action-active-bg);
        color: var(--action-active-color);
    }

    &:focus-visible {
        box-shadow: 0 0 0 var(--action-focus-ring-size) var(--action-focus-ring-color);
    }

    &:disabled,
    &[aria-disabled=true] {
        background-color: var(--action-disabled-bg);
        color: var(--action-disabled-color);
        cursor: not-allowed;
        pointer-events: none;
    }
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Exytra small action button
 */

.action[data-size=xs] {
    --action-size: var(--space-5);
}


/**
 * Modifier: Small action button
 */

.action[data-size=sm] {
    --action-size: var(--space-6);
}


/**
 * Modifier: Large action button
 */

.action[data-size=lg] {
    --action-size: var(--space-10);
}


/**
 * Modifier: Extra large action button
 */

.action[data-size=xl] {
    --action-size: var(--space-12);
}


/**
 * Modifier: Primary action button
 */

.action[data-theme=primary] {
    --action-bg: var(--button-primary-bg);
    --action-border-color: var(--button-primary-color);
    --action-color: var(--button-primary-color);
    --action-hover-bg: var(--button-primary-hover-bg);
    --action-hover-border-color: var(--button-primary-color);
    --action-hover-color: var(--button-primary-hover-color);
    --action-active-bg: var(--button-primary-active-bg);
    --action-active-border-color: var(--button-primary-active-border-color);
    --action-active-color: var(--button-primary-active-color);
    --action-disabled-bg: var(--button-primary-disabled-bg);
    --action-disabled-border-color: var(--button-primary-disabled-border-color);
    --action-disabled-color: var(--button-primary-disabled-color);
    --action-focus-ring-color: var(--button-primary-focus-ring-color);
}


/**
 * Modifier: Primary muted action button
 */

.action[data-theme=primary-muted] {
    --action-bg: var(--button-primary-muted-bg);
    --action-border-color: var(--button-primary-muted-color);
    --action-color: var(--button-primary-muted-color);
    --action-hover-bg: var(--button-primary-muted-hover-bg);
    --action-hover-border-color: var(--button-primary-muted-color);
    --action-hover-color: var(--button-primary-muted-hover-color);
    --action-active-bg: var(--button-primary-muted-active-bg);
    --action-active-border-color: var(--button-primary-muted-color);
    --action-active-color: var(--button-primary-muted-active-color);
    --action-disabled-bg: var(--button-primary-muted-disabled-bg);
    --action-disabled-border-color: var(--button-primary-muted-disabled-border-color);
    --action-disabled-color: var(--button-primary-muted-disabled-color);
    --action-focus-ring-color: var(--button-primary-muted-focus-ring-color);
}


/**
 * Modifier: Secondry action button
 */

.action[data-theme=secondary] {
    --action-bg: var(--button-secondary-bg);
    --action-border-color: var(--button-secondary-color);
    --action-color: var(--button-secondary-color);
    --action-hover-bg: var(--button-secondary-hover-bg);
    --action-hover-border-color: var(--button-secondary-hover-color);
    --action-hover-color: var(--button-secondary-hover-color);
    --action-active-bg: var(--button-secondary-active-bg);
    --action-active-border-color: var(--button-secondary-active-color);
    --action-active-color: var(--button-secondary-active-color);
    --action-disabled-bg: var(--button-secondary-disabled-bg);
    --action-disabled-border-color: var(--button-secondary-disabled-color);
    --action-disabled-color: var(--button-secondary-disabled-color);
    --action-focus-ring-color: var(--button-secondary-focus-ring-color);
}