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

/**
 * Displays useful information about a website or provides an action for a user
 * to interact with.
 */


//
// SCSS imports
//

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


/**
 * Widget
 */

.widget {
    --widget-bg: var(--bg-secondary);
    --widget-border-color: var(--border-color-secondary);
    --widget-border-radius: var(--rounded-md);
    --widget-border-width: var(--border-width);
    --widget-color: var(--text-color-primary);
    --widget-padding-x: var(--card-padding-x);
    --widget-padding-y: var(--card-padding-y);
    --widget-icon-border-radius: var(--rounded-sm);
    --widget-icon-size: var(--space-10);
    --widget-hover-bg: var(--bg-highlight);
    --widget-hover-border-color: var(--border-color-highlight);
    --widget-hover-color: var(--link-color);

    @include transition(('background-color', 'border-color'));
    align-items: center;
    background-color: var(--widget-bg);
    border: var(--widget-border-width) solid var(--widget-border-color);
    border-radius: var(--widget-border-radius);
    column-gap: var(--space-3);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: var(--widget-padding-y) var(--widget-padding-x);
    position: relative;
}


/**
 * Widget icon
 */

.widget__icon {
    @include transition(('border-color', 'color'));
    align-items: center;
    border: var(--widget-border-width) solid var(--widget-border-color);
    border-radius: var(--widget-icon-border-radius);
    color: var(--text-color-secondary);
    display: flex;
    height: var(--widget-icon-size);
    justify-content: center;
    flex-shrink: 0;
    width: var(--widget-icon-size);
}


/**
 * Widget content
 */

.widget__content {
    color: var(--widget-color);
}




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

/**
 * Modifier: Action widget
 */

.widget[data-action=true] {
    cursor: pointer;

    &:hover {
        background-color: var(--widget-hover-bg);
        border-color: var(--widget-hover-border-color);
        
        & > .widget__icon {
            border-color: var(--widget-hover-border-color);
            color: var(--widget-hover-color);
        }
    }
}