@use '../colors';
@use './button-util';

.root {
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 600;
  box-sizing: border-box;
  padding: 0;
  padding-left: var(--button-left-gutter, var(--button-gutter));
  padding-right: var(--button-right-gutter, var(--button-gutter));
  border: 0;
  outline: 0;
  text-decoration: none;
  overflow: hidden;
  font-size: var(--button-font-size);
  background: var(--button-background);
  color: var(--button-color);
  min-width: var(--button-min-size);
  height: var(--button-min-size);
  --button-icon-gutter: 12px;
  transition:
    background 0.2s ease-in-out,
    transform 0.1s ease-in-out;
  &::-moz-focus-inner {
    border: 0;
  }
  // @todo disabled для ссылок?
  &:disabled,
  &.disabled {
    pointer-events: none;
    color: var(--button-disabled-color, var(--button-color));
    background: var(--button-disabled-background, var(--button-background));
  }
  &.loading {
    color: transparent;
    > :not(.spinner) {
      opacity: 0;
      pointer-events: 0;
    }
  }
  &:not(:disabled):hover {
    cursor: pointer;
    background: var(--button-hover-background, var(--button-background));
  }
  &:not(:disabled):not(.loading):hover {
    color: var(--button-hover-color, var(--button-color));
  }
  &:active {
    transform: scale(0.96);
  }
}

// sizes
.size-xs {
  @include button-util.size-xs;
}

.size-s {
  @include button-util.size-s;
}

.size-m {
  @include button-util.size-m;
}

// content
.icon-only {
  --button-left-gutter: 0;
  --button-right-gutter: 0;
  --button-icon-gutter: 0;
}

.icon-start {
  --button-left-gutter: 0;
}

.icon-end {
  --button-right-gutter: 0;
}

// view variants
.view-primary {
  @include button-util.color-primary;
  &.theme-dark {
    --button-hover-background: #{colors.$additional-deep-blue};
    --button-disabled-background: #{colors.$basic-gray76};
    --button-disabled-color: #{colors.$basic-gray54};
  }
}

.view-secondary {
  @include button-util.color-secondary;
  &.theme-dark {
    --button-color: #{colors.$basic-white};
    --button-background: #{colors.$basic-gray76};
    --button-hover-background: #{colors.$basic-gray66};
    --button-disabled-background: #{colors.$basic-gray76};
    --button-disabled-color: #{colors.$basic-gray54};
  }
}

.view-success {
  @include button-util.color-success;
  &.theme-dark {
    --button-disabled-background: #{colors.$basic-gray76};
    --button-disabled-color: #{colors.$basic-gray54};
  }
}

.view-info {
  @include button-util.color-info;
  &.theme-dark {
    --button-disabled-background: #{colors.$basic-gray76};
    --button-disabled-color: #{colors.$basic-gray54};
  }
}

// icons
.icon {
  margin: 0 var(--button-icon-gutter);
  flex-shrink: 0;
  fill: currentColor;
}

// spinner
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}