exadel-inc/esl

@import (reference) './variables.less';
 
.btn {
  --btn-color: #212529;
  --btn-color-bg: fadeout(#212529, 50%);
 
  display: inline-block;
  position: relative;
  text-align: center;
  text-decoration: none;
 
  font-weight: 500;
  cursor: pointer;
  user-select: none;
 
  padding: 0.3rem 1rem 0.35rem;
 
  font-size: 1rem;
  line-height: 1.5;
 
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    text-shadow 0.15s ease-in-out,
    top 0.15s ease-in-out,
    left 0.15s ease-in-out;
 
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
 
  &:focus {
    outline: none;
  }
  &:focus-visible {
    outline: 2px dashed @focus-color;
  }
  &:disabled {
    opacity: 0.65;
  }
 
  color: var(--btn-color);
  border: 2px solid var(--btn-color);
  border-radius: 0.75rem;
  background-color: transparent;
 
  &:active {
    top: 1px;
    left: 1px;
  }
 
  &:hover,
  &:focus,
  &:active {
    color: var(--btn-color);
    border: 2px solid var(--btn-color);
    box-shadow:
      0 0 6px var(--btn-color),
      0 0 10px var(--btn-color);
    text-decoration: none;
  }
 
  &-sm {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 500;
  }
  &-lg {
    font-size: 1.2rem;
    line-height: 1.8;
    font-weight: 500;
  }
  &-spaced {
    padding: 0.7rem 2.75rem 0.75rem;
    @media @sm {
      padding: 0.7rem 2rem 0.75rem;
    }
  }
 
  &-sec-blue {
    --btn-color: @primary-blue;
    --btn-color-bg: fadeout(@primary-blue, 50%);
  }
  &-sec-green {
    --btn-color: @primary-green;
    --btn-color-bg: fadeout(@primary-green, 50%);
  }
  &-sec-orange {
    --btn-color: @primary-orange;
    --btn-color-bg: fadeout(@primary-orange, 50%);
  }
 
  &-link {
    &,
    &:focus,
    &:hover,
    &:active {
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
 
    text-decoration: solid underline @primary-blue 1px;
    transition: text-decoration-thickness 0.2s linear;
    &:hover {
      text-decoration: solid underline @primary-blue 2px;
    }
 
    &.btn {
      padding: 0;
    }
 
    &:disabled {
      color: #4f565d;
      pointer-events: none;
    }
  }
 
  &-container {
    margin: -0.4rem;
  }
  &-container & {
    margin: 0.4rem;
  }
 
  &-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  &-group-centered {
    justify-content: center;
  }
}