@use 'typography';
@use 'tokens';

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  // Set default font styles
  @include ui.font-color('text');
  @include ui.font-family('primary');
  @include ui.font-weight('regular');
  @include ui.line-height('small');
  @include ui.letter-spacing('small');

  // initiat tokens
  @include tokens.text-tokens;
  @include tokens.shadow-tokens;
  @include tokens.flyout-tokens;
  @include tokens.color-tokens;
  @include tokens.offset-tokens;
  @include tokens.spacing-tokens;
  @include tokens.border-radius-tokens;
  @include tokens.switch-tokens;
  @include tokens.input-dropzone-tokens;
  @include tokens.checkbox-tokens;
  @include tokens.input-tokens;
  @include tokens.select-tokens;
  @include tokens.icon-tokens;
  @include tokens.info-panel-tokens;
  @include tokens.tabular-tokens;
  @include tokens.modal-tokens;
  @include tokens.scrollable-tokens;
  @include tokens.avatar-tokens;
  @include tokens.title-tokens;
  @include tokens.button-tokens;
  @include tokens.badge-tokens;
  @include tokens.accordion-tokens;
  @include tokens.anchor-tokens;
  @include tokens.separator-tokens;
  @include tokens.zindex-tokens;

  // !!!conflict
  @include tokens.spacer-tokens;
  @include tokens.text-responsive-tokens;
  @include tokens.control-tokens;

  // initiat fonts
  @include typography.font-HelveticaNow;

  // responsive
  @include tokens.mp-tokens;
  @include tokens.paragraph-spacing-tokens;
  @include tokens.responsive-tokens('display');
  @include tokens.responsive-tokens('width');
  @include tokens.responsive-tokens('height');
  @include tokens.responsive-tokens('gap');
  @include tokens.responsive-tokens('flex-direction');
  @include tokens.responsive-tokens('align-items');
  @include tokens.responsive-tokens('justify-content');
  @include tokens.responsive-tokens('flex-wrap');
  @include tokens.responsive-tokens('flex');
  @include tokens.responsive-tokens('font-size');
  @include tokens.responsive-tokens('line-height');
  @include tokens.responsive-tokens('stroke-width');
}

a {
  display: inline-flex;
  color: ui.color('tertiary');
  cursor: pointer;
  text-decoration: underline;
  border-radius: ui.border-radius('xsmall');

  @include ui.animated;

  &:not([aria-disabled='true']) {
    text-decoration-color: currentcolor;

    &:hover {
      text-decoration-color: ui.color('tertiary', $alpha: 0.5);
    }

    &:focus-visible:not(:active, :hover) {
      box-shadow: 0 0 0 ui.use('anchor-outline-size') ui.color-token('anchor-focus-outline');
    }
  }

  &[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
  }

  &[aria-disabled='true']:active {
    pointer-events: none;
  }
}

// Default headers styles
h1,
h2,
h3,
h4,
h5,
h6 {
  @include ui.font-family('secondary');
}

h1 {
  @include ui.font-size('xxxlarge');
  @include ui.line-height('xxxlarge');
  @include ui.font-weight('bold');
}

h2 {
  @include ui.font-size('xxlarge');
  @include ui.line-height('xxlarge');
  @include ui.font-weight('bold');
}

h3 {
  @include ui.font-size('xlarge');
  @include ui.line-height('xlarge');
  @include ui.font-weight('bold');
}

h4 {
  @include ui.font-size('large');
  @include ui.line-height('large');
  @include ui.font-weight('bold');
}

h5 {
  @include ui.font-size('small');
  @include ui.line-height('small');
  @include ui.font-weight('bold');
}

h6 {
  @include ui.font-size('small');
  @include ui.line-height('small');
  @include ui.font-weight('regular');
}

kbd {
  font-weight: 300;
  padding: 2px ui.q(0.5);
  background-color: ui.color-token('kbd-background');
  border-radius: 2px;
  border: solid 1px ui.color-token('kbd-border');
}

li::marker {
  color: ui.color-token('li-marker');
}

// Utilities
.util-full-height {
  height: 100%;
}

.util-full-width {
  width: 100%;
}

.util-z-index-9000 {
  z-index: ui.zindex('max');
}

.util-text-unselectable,
.util-text-unselectable * {
  user-select: none !important;
}

.util-text-selectable,
.util-text-selectable * {
  user-select: text;
}

.util-flex-grow {
  flex-grow: 1;
}

.util-flex-no-shrink {
  flex-shrink: 0;
}