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

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

.root {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  padding: 0;
  border: 0;
  // ВАЖНО: не надо указывать здесь сброс margin так как его сложно перебить при сборке стилей
}

.root,
.root:link,
.root:visited,
.root:hover,
.root:active {
  cursor: default;
  text-decoration: none;
  border-bottom-color: transparent;
  &.underline {
    box-shadow: inset 0 -1px 0 0 currentColor;
  }
}

.root:hover {
  cursor: pointer;
}

.size-s {
  font-size: 14px;
  line-height: 20px;
}

.size-m {
  font-size: 16px;
  line-height: 24px;
}

.icon-gutter-4 {
  --text-button-icon-gutter: 4px;
}

.icon-gutter-8 {
  --text-button-icon-gutter: 8px;
}

// ниже двойные классы для высокой специфичности в монолите
.root.disabled {
  color: colors.$basic-gray24;
  pointer-events: none;
}

.root:not(.disabled).color-basic-blue {
  @include link-util.color('basic-blue');
}

.root:not(.disabled).color-basic-gray87 {
  @include link-util.color('basic-gray87');
}

.root:not(.disabled).color-basic-gray38 {
  @include link-util.color('basic-gray38');
}

.root:not(.disabled).color-basic-white {
  @include link-util.color('basic-white');
}

.root:not(.disabled).color-additional-red {
  @include link-util.color('additional-red');
}

.root:not(.disabled).color-additional-teal {
  @include link-util.color('additional-teal');
}

// иконки
.icon-start,
.icon-end {
  flex-shrink: 0;
  fill: currentColor;
}

.icon-start {
  margin-right: var(--text-button-icon-gutter);
}

.icon-end {
  margin-left: var(--text-button-icon-gutter);
}