$base-class: '.sui-AtomTag';

#{$base-class} {
  $self: &;
  border-radius: ceil($h-atom-tag-m * 0.5);
  height: $h-atom-tag-m;
  padding: $p-atom-tag-m;
  border: $bd-atom-tag;
  align-items: center;
  align-content: center;
  background-color: $bgc-atom-tag;
  box-sizing: border-box;
  cursor: text;
  display: inline-flex;
  font-size: $fz-s;
  justify-content: center;
  position: relative;
  white-space: nowrap;
  text-decoration: none;

  &:has(#{$self}-closeable) {
    padding-right: 0;
  }
  &#{$self}-hasClose {
    padding-right: 0;
  }
  &:focus-visible {
    box-shadow: none;
    outline: 2px solid transparentize($c-primary, 0.2);
    outline-offset: 2px;
  }

  &#{$self}--color {
    @include atom-tag-variation($self, $c-atom-tag);
  }
  &#{$self}--type {
    @include atom-tag-variation($self, $atom-tag-types);
  }

  * ~ #{$base-class}-label {
    margin: 0 0 0 $m-s;
  }

  #{$base-class}-label + * {
    margin: 0 0 0 $m-s;
  }

  #{$base-class}-label {
    // max width - 2 icon size
    $w-label-base: $mw-label - ($p-l * 2);
    display: inline-block;
    line-height: $h-atom-tag-m;
    max-width: $w-label-base;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;

    // if only one icon is set
    .sui-AtomTag-hasIcon &,
    .sui-AtomTag-hasClose & {
      max-width: $w-label-base - ($p-l + $m-s);
    }

    // if both icons are set
    .sui-AtomTag-hasIcon.sui-AtomTag-hasClose & {
      max-width: $w-label-base - ($p-l + $m-s) * 2;
    }
  }

  &-closeable {
    $this: &;
    padding: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: $sz-base * 2;

    &:focus-visible {
      box-shadow: none;
      outline: none;
      #{$this}Icon {
        box-shadow: none;
        outline: 2px solid transparentize($c-primary, 0.2);
        outline-offset: 1px;
      }
    }

    &Icon {
      cursor: pointer;
      line-height: initial;
      position: relative;
      border-radius: $bdrs-rounded;
      background-color: $bgc-atom-tag-closable-icon;
      fill: $c-atom-tag-closable-icon;
      color: $c-atom-tag-closable-icon;
    }
  }

  &-icon {
    @include icon-atom-tag(icon);
    margin-left: 0;
  }

  &-secondary-icon {
    @include icon-atom-tag(icon-secondary);
    margin-right: 0;
  }
  &-actionable:not(:disabled, [data-disabled='true'], [data-read-only='true']) {
    cursor: pointer;
  }
  &:disabled,
  &[data-disabled='true'],
  &[data-read-only='true'] {
    cursor: default;
  }

  &--size {
    @each $tag_name, $tag_h, $tag_p in $sz-atom-tag {
      &-#{$tag_name} {
        border-radius: ceil($tag_h * 0.5);
        height: $tag_h;
        padding: $tag_p;

        &#{$self}-hasClose {
          padding-right: 0;
        }

        #{$self}-closeable {
          padding: map-get($p-atom-tag-hasIcon-hasClose, $tag_name);
        }

        #{$self}-label {
          line-height: $tag_h;
        }
      }
    }
  }

  &--responsive {
    border-radius: ceil($h-atom-tag-l * 0.5);
    height: $h-atom-tag-l;
    &:has(#{$self}-closeable) {
      padding-right: 0;
    }
    &#{$self}-hasClose {
      padding-right: 0;
    }
    & .sui-AtomTag-label {
      line-height: $h-atom-tag-l;
    }

    @include media-breakpoint-up(s) {
      &#{$self}--size {
        @each $tag_name, $tag_h, $tag_p in $sz-atom-tag {
          &-#{$tag_name} {
            border-radius: ceil($tag_h * 0.5);
            height: $tag_h;
            padding: $tag_p;

            & .sui-AtomTag-label {
              line-height: $tag_h;
            }

            &#{$self}-hasClose {
              padding-right: 0;
            }

            #{$self}-closeable {
              padding: map-get($p-atom-tag-hasIcon-hasClose, $tag_name);
            }
          }
        }
      }
    }
  }

  @media print {
    border: {
      color: $bgc-atom-tag;
      style: solid;
      width: $bdrs-s;
    }
  }
}