/* stylelint-disable selector-max-class, no-descending-specificity, max-nesting-depth */

.tagRoot {
  box-sizing: border-box;
  font-family: var(--fontFamily);
  display: inline-flex;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  user-select: none;
}

.small {
  padding: var(--paddingSmall);
  font-size: var(--fontSizeSmall);

  .text {
    line-height: calc(var(--heightSmall) - (var(--defaultBorderWidth) * 2));
  }

  .icon {
    font-size: 0.75rem;
  }
}

.medium {
  padding: var(--padding);
  font-size: calc(var(--fontSizeMedium) - 0.0625rem);

  .text {
    line-height: calc(var(--heightMedium) - (var(--defaultBorderWidth) * 2));
  }

  .icon {
    font-size: 0.75rem;
  }
}

.large {
  padding: var(--padding);
  font-size: calc(var(--fontSizeLarge) - 0.0625rem);

  .text {
    line-height: calc(var(--heightLarge) - (var(--defaultBorderWidth) * 2));
  }

  .icon {
    font-size: 0.875rem;
  }
}

.button {
  touch-action: manipulation;
  outline: none;
  position: relative;
  overflow: visible;
  transition: background-color var(--transitionTiming);

  &::before {
    content: "";
    box-sizing: border-box;
    border:
      var(--focusOutlineWidth) var(--focusOutlineStyle)
      var(--focusOutlineColor);
    border-radius: var(--borderRadius);
    position: absolute;
    top: -0.3125rem;
    bottom: -0.3125rem;
    left: -0.3125rem; /* stylelint-disable-line property-blacklist */
    right: -0.3125rem; /* stylelint-disable-line property-blacklist */
    opacity: 0;
    transform: scale(0.9);
    transition: all var(--transitionTiming);
    pointer-events: none;
  }

  &:not(.dismissible) {
    cursor: pointer;
  }

  &:focus {
    &::before {
      opacity: 1;
      transform: scale(1);
    }
  }

  &.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }
}

.icon {
  margin-inline-start: var(--iconMargin);
  margin-inline-end: 0;
  transform: translateY(0.0625rem);
  transition: all var(--transitionTiming);
  cursor: pointer;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--maxWidth);
}

.default {
  background-color: var(--defaultBackground);
  border:
    var(--defaultBorderWidth) var(--defaultBorderStyle)
    var(--defaultBorderColor);
  border-radius: var(--defaultBorderRadius);
  color: var(--defaultColor);

  &.button {
    &::before {
      border-radius: var(--defaultBorderRadius);
    }

    &:hover {
      background-color: var(--defaultBackgroundHover);
    }
  }

  &.dismissible {
    .icon {
      color: var(--defaultIconColor);
    }

    &:hover {
      .icon {
        color: var(--defaultIconHoverColor);
      }
    }
  }
}

.inline {
  background-color: var(--inlineBackground);
  border:
    var(--inlineBorderWidth) var(--inlineBorderStyle)
    var(--inlineBorderColor);
  border-radius: var(--inlineBorderRadius);
  color: var(--inlineColor);
  cursor: text;
  margin: 0 0.1875rem 0.1875rem;

  &.button {
    &::before {
      border-radius: calc(var(--inlineBorderRadius) * 1.5);
    }

    &:hover {
      background-color: var(--inlineBackgroundHover);
    }
  }

  &.dismissible {
    .icon {
      background-color: var(--inlineIconColor);
      border-radius: 50%;
      color: var(--inlineBackground);
      font-size: 0.75rem;
      padding: 0.25rem;
      position: absolute;
      inset-inline-end: 0;
      inset-inline-start: auto;
      top: 0;
      transform: translate(40%, -40%);
    }

    &:hover {
      .icon {
        background-color: var(--inlineIconHoverColor);
      }
    }
  }
}

[dir="rtl"] .inline.dismissible .icon {
  transform: translate(-40%, -40%);
}
/* stylelint-enable selector-max-class, no-descending-specificity, max-nesting-depth */