/**
 * Tag
 * @define tag
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$tag: null !default;

.ecl-tag {
  align-items: center;
  background-color: map.get($tag, 'background-color');
  border-radius: map.get($tag, 'border-radius');
  border-width: 0;
  box-sizing: border-box;
  color: map.get($tag, 'color');
  display: inline-flex;
  font: var(--f-ui-s);
  padding: map.get($tag, 'padding');
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 5px;

  &:focus-visible {
    background-color: map.get($tag, 'background-color-focus');
    color: map.get($tag, 'color-focus');
    outline: 2px solid map.get($tag, 'outline-color-focus');
    outline-offset: map.get($tag, 'outline-offset-focus');
  }

  &:hover {
    background-color: map.get($tag, 'background-color-hover');
    color: map.get($tag, 'color-hover');
  }

  &:active {
    background-color: map.get($tag, 'background-color-active');
    color: map.get($tag, 'color-active');
    outline: 1px solid map.get($tag, 'outline-color-active');
    outline-offset: -1px;
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

// No wrap
.ecl-tag--nowrap {
  white-space: nowrap;
}

// Removable tag
.ecl-tag--removable {
  text-decoration: none;
}

.ecl-tag__icon {
  appearance: none;
  background: none;
  border-width: 0;
  color: map.get($tag, 'color');
  flex-shrink: 0;
  height: map.get($theme, 'icon', 'xs');
  margin-inline-start: var(--s-2xs);
  padding: 0;
  pointer-events: auto;
  position: relative;
  width: map.get($theme, 'icon', 'xs');

  &.ecl-tag__icon--external {
    height: map.get($theme, 'icon', '2xs');
    width: map.get($theme, 'icon', '2xs');
  }
}

.ecl-tag__icon-close {
  fill: currentcolor;
  left: 0;
  position: absolute;
  top: 0;
}

// Tag set
.ecl-tag-set {
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  margin: calc(-1 * var(--s-xs)) 0 0;
  padding: 0;

  .ecl-tag-set__item {
    margin-inline-end: var(--s-xs);
    margin-inline-start: 0;
    margin-top: var(--s-xs);
    padding: 0;

    &:last-child {
      margin-inline-end: 0;
    }
  }
}
