@mixin link-default($color, $decoration) {
  &:link,
  &:visited,
  &:hover,
  &:active {
    color: $color;
    text-decoration: $decoration;
  }
}

@mixin clearfix {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

@mixin visuallyhidden {
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
}

@mixin trbl($val) {
  top: $val;
  right: $val;
  bottom: $val;
  left: $val;
}

@mixin dragHandle {
  transition: all 0.15s ease-out;

  &:hover {
    background-color: $color-ui-hover;
  }

  &:active {
    background-color: $color-ui-active;
  }

  &.is-disabled {
    pointer-events: none;
    visibility: hidden;
  }

  @include mq($until: navCollapse) {
    pointer-events: none;
    visibility: hidden;
  }
}

// stylelint-disable font-family-no-missing-generic-family-keyword
// Typography
@mixin font($preset) {
  @if $preset == title {
    font: bold 1.75rem /#{(32 / 28)} $font-family-sans-serif;
    font-feature-settings: 'dlig' 1;
    letter-spacing: -0.025em;
  }

  @if $preset == heading {
    font: bold 1.3125rem /#{(24 / 21)} $font-family-sans-serif;
    font-feature-settings: 'dlig' 1;
  }

  @if $preset == subHeading {
    font: bold 1.125rem /#{(24 / 18)} $font-family-sans-serif;
    font-feature-settings: 'dlig' 1;
  }

  @if $preset == body {
    font: normal 1rem /#{(24 / 16)} $font-family-sans-serif;
  }

  @if $preset == caption {
    font: normal 0.875rem /#{(24 / 14)} $font-family-sans-serif;
  }

  @if $preset == code {
    font: normal 0.875rem /#{(24 / 14)} $font-family-monospace;
  }

  @if $preset == label {
    font: normal 0.75rem /#{(20 / 12)} $font-family-sans-serif;
    letter-spacing: 0.075em;
    text-transform: uppercase;
  }
}
// stylelint-enable font-family-no-missing-generic-family-keyword

// Logical positioning
@mixin padding-inline($position, $amount) {
  @if $position == start {
    [dir='ltr'] & {
      padding-left: $amount;
    }
    [dir='rtl'] & {
      padding-right: $amount;
    }
    padding-inline-start: $amount;
  }

  @if $position == end {
    [dir='ltr'] & {
      padding-right: $amount;
    }
    [dir='rtl'] & {
      padding-left: $amount;
    }
    padding-inline-end: $amount;
  }
}

@mixin margin-inline($position, $amount) {
  @if $position == start {
    [dir='ltr'] & {
      margin-left: $amount;
    }
    [dir='rtl'] & {
      margin-right: $amount;
    }
    margin-inline-start: $amount;
  }

  @if $position == end {
    [dir='ltr'] & {
      margin-right: $amount;
    }
    [dir='rtl'] & {
      margin-left: $amount;
    }
    margin-inline-end: $amount;
  }
}

@mixin border-inline($position, $style) {
  @if $position == start {
    [dir='ltr'] & {
      border-left: $style;
    }
    [dir='rtl'] & {
      border-right: $style;
    }
    border-inline-start: $style;
  }

  @if $position == end {
    [dir='ltr'] & {
      border-right: $style;
    }
    [dir='rtl'] & {
      border-left: $style;
    }
    border-inline-end: $style;
  }
}

@mixin border-inline-color($position, $color) {
  @if $position == start {
    [dir='ltr'] & {
      border-left-color: $color;
    }
    [dir='rtl'] & {
      border-right-color: $color;
    }
    border-inline-start-color: $color;
  }

  @if $position == end {
    [dir='ltr'] & {
      border-right-color: $color;
    }
    [dir='rtl'] & {
      border-left-color: $color;
    }
    border-inline-end-color: $color;
  }
}

@mixin offset-inline($position, $value: 0) {
  @if $position == start {
    [dir='ltr'] & {
      left: $value;
    }
    [dir='rtl'] & {
      right: $value;
    }
    offset-inline-start: $value;
  }

  @if $position == end {
    [dir='ltr'] & {
      right: $value;
    }
    [dir='rtl'] & {
      left: $value;
    }
    offset-inline-end: $value;
  }
}