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

/**
 * Tags allow users to enter information, make selections, filter content, or
 * trigger actions. They’re similar to badges, but are more commonly used in
 * inputs to allow users to select multiple items at once.
 */


//
// SCSS imports
//

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


/**
 * Tag
 */

.tag {
    --tag-border-color: var(--border-color-primary);
    --tag-border-radius: var(--rounded-sm);
    --tag-border-width: var(--border-width);
    --tag-color: var(--text-color-secondary);
    --tag-font-size: #{$font-size-sm};
    --tag-height: var(--space-9);
    --tag-line-height: #{$line-height-sm};
    --tag-padding-x: var(--space-2);
    --tag-hover-bg: var(--bg-highlight);
    --tag-hover-border-color: var(--border-color-highlight);
    --tag-hover-color: var(--link-color);
    --tag-action-border-radius: var(--rounded-xs);
    --tag-action-color: var(--text-color-secondary);
    --tag-action-size: var(--space-5);
    --tag-action-hover-bg: var(--bg-tertiary);
    
    @include transition(('background-color', 'border-color', 'color'));
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: var(--tag-border-width) solid var(--tag-border-color);
    border-radius: var(--tag-border-radius);
    color: var(--tag-color);
    display: inline-flex;
    font-size: var(--tag-font-size);
    gap: var(--space-1);
    justify-content: center;
    line-height: var(--tag-line-height);
    min-height: var(--tag-height);
    padding-left: var(--tag-padding-x);
    padding-right: var(--tag-padding-x);

    &[type=button] {
        cursor: pointer;

        & > .tag__label,
        & > .tag__action {
            pointer-events: none;
        }

        &:hover {
            background-color: var(--tag-hover-bg);
            border-color: var(--tag-hover-border-color);
            color: var(--tag-hover-color);

            & > .tag__action {
                color: var(--gray-400);
            }
        }
    }
}


/**
 * Tag label
 */

.tag__label {
    @include font-size('sm');
    font-weight: var(--font-weight-medium);
}


/**
 * Tag action
 */

.tag__action {
    @include transition(('background-color', 'color'));
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: 0;
    border-radius: var(--tag-action-border-radius);
    color: var(--tag-action-color);
    cursor: pointer;
    display: flex;
    height: var(--tag-action-size);
    justify-content: center;
    width: var(--tag-action-size);

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




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

/**
 * Modifier: Small tag
 */

.tag[data-size=sm] {
    --tag-font-size: #{$font-size-xs};
    --tag-height: var(--space-6);
    --tag-line-height: #{$line-height-xs};
    --tag-padding-x: var(--space-2);
}


/**
 * Modifier: Medium tag
 */

.tag[data-size=md] {
    --tag-font-size: #{$font-size-sm};
    --tag-height: var(--space-7);
    --tag-line-height: #{$line-height-sm};
    --tag-padding-x: var(--space-2);
}


/**
 * Modifier: Large tag
 */

.tag[data-size=lg] {
    --tag-font-size: #{$font-size-sm};
    --tag-height: var(--space-8);
    --tag-line-height: #{$line-height-sm};
    --tag-padding-x: var(--space-2);
}