button.scss

@forward './../variables/options';

@use 'sass:map';
@use 'sass:math';

@use './../variables/components/button';
@use './../variables/color';
@use './../variables/commons';
@use './../variables/type';
@use './../variables/spacing';
@use './../mixins/color' as color-mx;
@use './../mixins/icons' as icon-mx;
@use './../mixins/utilities';
@use './../mixins/forms';
@use './../mixins/button' as button-mx;
@use './../mixins/icon-button' as icon-button-mx;
@use './../functions/icons' as icon-fn;
@use './../functions/color' as color-fn;
@use './../placeholders/button' as button-ph;
@use '../functions/tokens';
@use '../tokens/components';
@use '../tokens/elements';

tokens.$default-map: components.$post-button;

.btn {
  // Resets
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  transition: button.$btn-transition;
  border-width: tokens.get('button-border-width');
  border-style: solid;
  border-radius: tokens.get('button-border-radius-round');
  background-color: transparent;
  box-shadow: none;
  font-family: inherit;
  font-weight: tokens.get('button-label-font-weight');
  text-decoration: none;
  white-space: nowrap; // Long content should never break in buttons

  &:hover {
    text-decoration: none;
  }

  @include button-mx.button-size();

  &:disabled {
    border-style: tokens.get('button-border-style-disabled');
  }

  @include utilities.focus-style;

  // Styles  to improve accessibility in high contrast mode
  @include utilities.high-contrast-mode() {
    &[class] {
      border-color: ButtonBorder;
      background-color: ButtonFace;

      &:not(:disabled, .disabled) {
        &:hover {
          border-color: highlight;
        }
      }

      &:disabled {
        border-color: GrayText !important;
      }
    }
  }
}

// Type variants
@each $variant in button.$btn-variants {
  .btn-#{$variant} {
    $color: if($variant == 'default', 'secondary', if($variant == 'link', 'tertiary', $variant));

    @if ($variant != 'link' and $variant != 'tertiary') {
      box-shadow: tokens.get('button-elevation');
    }

    @include button-mx.button-variant-def('enabled', $color);

    &:disabled {
      @include button-mx.button-variant-def('disabled', $color);
    }

    @include utilities.not-disabled-hover() {
      @include button-mx.button-variant-def('hover', $color);
    }
  }
}

.btn-tertiary {
  // Styles  to improve accessibility in high contrast mode
  @include utilities.high-contrast-mode() {
    color: linktext;
    text-decoration: underline !important;
  }
}

// Size variants, default is md
@each $size in button.$btn-non-default-sizes {
  .btn-#{$size} {
    @include button-mx.button-size($size);
  }
}

.btn-link {
  text-decoration: tokens.get('link-decoration', elements.$post-link);
  border: 0 none;
  border-radius: tokens.get('link-border-radius', elements.$post-link);
  min-height: 0;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;

  &:hover {
    color: tokens.get('link-hover-fg', elements.$post-link);
  }
}