_mixins.scss

@mixin disabledAttribute() {
  &[disabled],
  &[disabled]:hover {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
}

@mixin button($color, $background, $border) {
  display: block;
  box-sizing: border-box;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 150%;
  max-height: 2.75rem;
  text-align: center;
  color: $color;
  background: $background;
  border: $border;
  white-space: nowrap;
  &:hover {
    opacity: 0.8;
    transform: scale(1.02);
    cursor: pointer;
  }
  @include disabledAttribute;
}

@mixin icon($bg, $bg-hover) {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  padding: 0.25rem;
  cursor: pointer;
  background: $bg;
  &:hover {
    background: $bg-hover;
  }
}

@mixin banner($color, $bg) {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100vw;
  background: $bg;
  color: $color;
  overflow: hidden;
  white-space: nowrap;
}

@mixin borderColor($color) {
  background: inherit;
  border: 1px solid $color;
}

@mixin gradientBackground($angle, $rgba1, $percent1, $rgba2, $percent2) {
  background: linear-gradient($angle, $rgba1 $percent1, $rgba2 $percent2);
}

@mixin stepColor($color) {
  color: rgba($color, 0.6);
}