<div class="actions">
    <!-- .tag class on <div> element ------------------->
    <div class="tag accent-secondary">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        .tag class on div
    </div>

    <div class="tag -active accent-secondary">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        Active Tag
    </div>

    <!-- Inactive Tag -->
    <div class="tag -inactive accent-secondary">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        Inactive Tag
    </div>

    <!-- Button Tag -->
    <button class="tag accent-secondary">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        Button Tag
    </button>

    
</div>

<div class="actions">
    <!-- Checkbox Tag -->
    <label class="tag field -inline accent-secondary" for="tag-checkbox-inactive">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        
        Unchecked Checkbox Tag
        <input class="tag__input" type="checkbox" id="tag-checkbox-inactive">
    </label>

    <label class="tag field -inline accent-secondary" for="tag-checkbox-active">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        
        Checked Checkbox Tag
        <input class="tag__input" type="checkbox" id="tag-checkbox-active" checked>
    </label>

    <!-- Dismissable Tag -->
    <label class="tag field -inline -dismissable accent-secondary" for="tag-checkbox-dismissable">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag" />
            <use href="/main-icons-sprite.svg#close" />
        </svg>
        Dissmissable Checkbox Tag
        <input class="tag__input" type="checkbox" id="tag-checkbox-dismissable" checked>
    </label>

    <label class="tag field -inline accent-secondary" for="tag-checkbox-disabled">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        
        Disabled Checkbox Tag
        <input class="tag__input" type="checkbox" id="tag-checkbox-disabled" disabled>
    </label>
</div>

<!-- Radio Tag -->
<div class="actions">

    <!-- <tag> element for radio input -->
    <label class="tag field -inline accent-secondary" for="tag-radio-inactive">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        Inactive Radio Tag
        <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-inactive">
    </label>

    <!-- .tag class on <label> element for radio input -->
    <label class="tag field -inline accent-secondary" for="tag-radio-active">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        Active Radio Tag
        <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-active" checked>
    </label>

        <!-- disabled tag for radio input -->
        <label class="tag field -inline accent-secondary" for="tag-radio-disabled">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        Disabled Radio Tag
        <input class="tag__input" type="radio" name="radio-tag-group" id="tag-radio-disabled" disabled>
    </label>
</div>

/**
 * For use on checkboxes, radio switches, buttons, anchors or spans.
 * when used with checkboxs and radio the markup should be the following:
 *
 * @example
    <label class="tag field -inline" for="tag-checkbox-active">
        <svg class="tag__icon">
            <use href="/main-icons-sprite.svg#tag">
        </svg>
        Checked Checkbox Tag
        <input class="tag__input" type="checkbox" id="tag-checkbox-active" checked>
    </label>
 */

.tag {
    $b: &;

    align-items: center;
    background-color: transparent;
    border: 1px solid var(--accent-color);
    border-radius: .333em; 
    color: var(--accent-color-700);
    display: inline-flex;
    font-size: var(--root-font-size-sm);
    gap: 0.667em;
    justify-content: space-between;
    line-height: 1;  
    margin-bottom: calc(var(--root-gap) / 2);
    margin-right: calc(var(--root-gap) / 2);
    padding: 0.667em 1.333em;
    position: relative;
    transition: background var(--root-ease-out-fast), border-color var(--root-ease-out-fast);

    &__input {
        display: none;
    }

    &__icon {
        aspect-ratio: 1;
        color: var(--accent-color);
        flex-shrink: 0;
        height: 1.25em;
        width: 1.25em;

        > use {
            &:nth-child(2) {
                opacity: 0;
            }
        }
    }

    &:hover {
      border-color: var(--accent-color-700);

      #{$b}__icon {
        color: var(--accent-color-700);
      }
    }

    // Button tag
    &:where(button) {
        background-color: var(--accent-color);
        border-color: var(--accent-color);
        color: #fff;
        box-shadow: var(--root-box-shadow-low);
        #{$b}__icon {
            color: #fff;
        }
        
        &:hover {
            background-color: var(--accent-color-700);
            border-color: var(--accent-color-700);
            cursor: pointer;

            #{$b}__icon {
              color: inherit;
            }
        }
    }

    // Active/checked state
    &.-active,
    &:has(input:checked) {
        background-color: var(--accent-color-700);
        border-color: var(--accent-color-700);
        color: #fff;

        #{$b}__icon {
            color: #fff;
        }
    }

    // Dismissabe checkbox
    &.-dismissable:has(input:checked) {
        background-color: var(--accent-color-700);
        border-color: var(--accent-color-700);
        color: #fff;
        #{$b}__icon {
            color: #fff;
            padding: .1667em;

            > use:nth-child(1) {
                opacity: 0;
            }

            > use:nth-child(2) {
                opacity: 1;
            }
        }
    }

    // forced inactive state.
    &.-inactive, &:has(input:disabled) {
        background-color: transparent;
        border-color: var(--root-color-inactive);
        color: var(--root-color-inactive);
        #{$b}__icon {
            color: var(--root-color-inactive);
        }
    }

}