yannstatic/_sass/common/components/_button.scss

@mixin button() {
  display: inline-block;
  font-weight: map-get($button, font-weight);
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  outline: none;
  @include user-select(none);
  svg {
    width: 1rem;
    height: 1rem;
  }
  @include disabled() {
    cursor: not-allowed;
  }
}

.button {
  @include button();
}

.button--primary {
  @include clickable($text-color-1, $main-color-1);
}

.button--secondary {
  @include clickable($text-color-3, $main-color-3);
}

.button--success {
  @include clickable($text-color-function, $green);
}

.button--info {
  @include clickable($text-color-function, $blue);
}

.button--warning {
  @include clickable($text-color-function, $yellow);
}

.button--error {
  @include clickable($text-color-function, $red);
}

.button--theme-light {
  @include clickable($text-color-theme-dark, $main-color-theme-light);
}

.button--theme-dark {
  @include clickable($text-color-theme-light, $main-color-theme-dark);
}

.button--outline-primary {
  color: $main-color-1;
  border: 1px solid $main-color-1;
  @include clickable($main-color-1, transparent, $text-color-1, $main-color-1);
}

.button--outline-secondary {
  color: $main-color-3;
  border: 1px solid $main-color-3;
  @include clickable($main-color-3, transparent, $text-color-3, $main-color-3);
}

.button--outline-success {
  color: $green;
  border: 1px solid $green;
  @include clickable($green, transparent, $text-color-function, $green);
}

.button--outline-info {
  color: $blue;
  border: 1px solid $blue;
  @include clickable($blue, transparent, $text-color-function, $blue);
}

.button--outline-warning {
  color: $yellow;
  border: 1px solid $yellow;
  @include clickable($yellow, transparent, $text-color-function, $yellow);
}

.button--outline-error {
  color: $red;
  border: 1px solid $red;
  @include clickable($red, transparent, $text-color-function, $red);
}

.button--outline-theme-light {
  color: $main-color-theme-light;
  border: 1px solid $main-color-theme-light;
  @include clickable($main-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
}

.button--outline-theme-dark {
  color: $main-color-theme-dark;
  border: 1px solid $main-color-theme-dark;
  @include clickable($main-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
}

.button--pill {
  border-radius: map-get($button, pill-radius);
  @extend .button--md;
}

.button--rounded {
  border-radius: map-get($base, border-radius);
  @extend .button--md;
}

.button--circle {
  @include inline-flex();
  @include justify-content(center);
  @include align-items(center);
  border-radius: 50%;
  @extend .button--md;
}

.button--md {
  padding: map-get($button, padding-y) map-get($button, padding-x);
  font-size: map-get($base, font-size);
  &.button--circle {
    width: map-get($button, circle-diameter);
    height: map-get($button, circle-diameter);
  }
}

.button--xs {
  padding: map-get($button, padding-y-xs) map-get($button, padding-x-xs);
  font-size: map-get($base, font-size-xs);
  &.button--circle {
    width: map-get($button, circle-diameter-xs);
    height: map-get($button, circle-diameter-xs);
  }
}

.button--sm {
  padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
  font-size: map-get($base, font-size-sm);
  &.button--circle {
    width: map-get($button, circle-diameter-sm);
    height: map-get($button, circle-diameter-sm);
  }
}

.button--lg {
  padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
  font-size: map-get($base, font-size-lg);
  &.button--circle {
    width: map-get($button, circle-diameter-lg);
    height: map-get($button, circle-diameter-lg);
  }
}

.button--xl {
  padding: map-get($button, padding-y-xl) map-get($button, padding-x-xl);
  font-size: map-get($base, font-size-xl);
  &.button--circle {
    width: map-get($button, circle-diameter-xl);
    height: map-get($button, circle-diameter-xl);
  }
}