<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: 0.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: #ffffff;
    box-shadow: var(--root-box-shadow-low);
    #{$b}__icon {
      color: #ffffff;
    }

    &: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: #ffffff;

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

  // Dismissabe checkbox
  &.-dismissable:has(input:checked) {
    background-color: var(--accent-color-700);
    border-color: var(--accent-color-700);
    color: #ffffff;
    #{$b}__icon {
      color: #ffffff;
      padding: 0.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);
    }
  }
}