@use '../colors';
@use '../utils';
@use './chip-util';

.root {
  @include utils.reset-button;
}

.root {
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none;
  padding: 0 12px;
  background: var(--chip-background);
  color: var(--chip-color);
  transition:
    background 100ms ease-in,
    color 100ms ease-in;
  &:focus-visible {
    @include utils.focus-visible-style;
  }

  // ВАЖНО: переопределяем стили монолита для ссылок
  &,
  &:link,
  &:visited {
    background: var(--chip-background);
    color: var(--chip-color);
  }

  // ВАЖНО: эффект при наведении определяем **после** переопределения стилей монолита
  &:hover {
    cursor: pointer;
    background: var(--chip-hover-background);
    color: var(--chip-hover-color);
  }
  &.disabled {
    pointer-events: none;
    user-select: none;
    background: var(--chip-disabled-background);
    color: var(--chip-disabled-color);
  }
  &.checked {
    background: var(--chip-checked-background);
    color: var(--chip-checked-color);
  }
  &.checked:hover {
    background: var(--chip-checked-hover-background);
    color: var(--chip-checked-hover-color);
  }
  &.checked.disabled {
    background: var(--chip-checked-disabled-background);
    color: var(--chip-checked-disabled-color);
  }
}

.padding-x {
  padding: 0 12px;
}

.padding-start {
  padding: 0 0 0 12px;
}

.adornment-gutter-default {
  --chip-adornment-gutter: 8px;
}

.colors-light {
  @include chip-util.colors-light;
}

.colors-dark {
  @include chip-util.colors-dark;
}

.shape-square {
  border-radius: 4px;
}

.shape-pill {
  border-radius: 999999px;
}

.section-main {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.section-end-adornment {
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: var(--chip-adornment-gutter);
}

.icon-button {
  @include utils.reset-button;
}

.icon-button {
  display: flex;
  align-items: center;
  height: 32px;
  margin-left: 4px;
  padding-left: 4px;
  padding-right: 12px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  &:focus-visible {
    @include utils.focus-visible-style;
  }
  &:not(:hover) {
    color: var(--chip-color);
  }
  &:hover {
    color: var(--chip-hover-color);
  }
}

.disabled .icon-button {
  &:not(:hover) {
    color: var(--chip-disabled-color);
  }
  &:hover {
    color: var(--chip-disabled-hover-color);
  }
}

.checked .icon-button {
  &:not(:hover) {
    color: var(--chip-checked-color);
  }
  &:hover {
    color: var(--chip-checked-hover-color);
  }
}

.checked.disabled .icon-button {
  &:not(:hover) {
    color: var(--chip-checked-disabled-color);
  }
  &:hover {
    color: var(--chip-checked-disabled-hover-color);
  }
}