// ----------------------------------------------------------
// FS UI STYLES
// Utilities
// ----------------------------------------------------------

/* SQ-DISABLE */
@use "sass:math";

/* SQ-ENABLE */

// Include Media Overwrites //////////////////////////
@use "~include-media/dist/include-media" as * with ($breakpoints: ("phone": 320px,
"phonemid": 375px,
"tablet": 768px,
    "notebook": 1280px,
    "desktop": 1440px,
  ));

@forward "~include-media/dist/include-media";

// Global mixins /////////////////////////////////////

// Px to rem.
$base: 16px !default;

@function rem($size) {
  $rem: math.div($size, $base);

  @return #{$rem}rem;
}

@mixin truncate-title($max-lines: var(--fs-text-max-lines)) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: $max-lines;
  line-clamp: $max-lines;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  white-space: normal;
}

// Layout & Spacing Mixins ///////////////////////////

@mixin layout-content {
  box-sizing: border-box;
  width: calc(100% - var(--fs-grid-padding) - var(--fs-grid-padding));
  max-width: var(--fs-grid-max-width);
  margin-inline: auto;
}

@mixin layout-content-full {
  width: 100%;
  max-width: 100%;
}

@mixin layout-colored($bkg-color: var(--fs-color-neutral-bkg), $padding-top: var(--fs-spacing-5), $padding-bottom: var(--fs-spacing-7)) {
  padding-top: $padding-top;
  padding-bottom: $padding-bottom;
  background-color: $bkg-color;
}

@mixin section-divisor($position: "top", $padding: #{var(--fs-grid-padding)}) {
  @if $position == "top" {
    padding-top: $padding;
    border-top: var(--fs-border-width) solid var(--fs-border-color-light);

    @include media(">=notebook") {
      padding-top: $padding;
    }
  }

  @if $position == "bottom" {
    padding-bottom: $padding;
    border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);

    @include media(">=notebook") {
      padding-bottom: $padding;
    }
  }
}

// Focus Ring Mixins /////////////////////////////////

@mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
  @media not all and (min-resolution: .001dpcm) {
    // Target only Safari browsers
    @supports (-webkit-appearance:none) {
      // Use `focus` instead of `focus-visible`
      &:hover:focus,
      // due to Safari's lack of support
      &:focus {
        border-color: $border;
        outline: none;
        box-shadow:
          0 0 0 1px var(--fs-color-body-bkg),
          0 0 0 var(--fs-border-width-thickest) $outline,
          inset 0 0 0 var(--fs-border-width) $border;
      }
    }
  }

  &:focus-visible,
  &:hover:focus-visible {
    border-color: $border;
    outline: none;
    box-shadow:
      0 0 0 1px var(--fs-color-body-bkg),
      0 0 0 var(--fs-border-width-thickest) $outline,
      inset 0 0 0 var(--fs-border-width) $border;
  }
}

@mixin focus-ring {
  outline: none;
  box-shadow: 0 0 0 1px var(--fs-color-body-bkg), 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring);
}

@mixin focus-ring-visible {
  @media not all and (min-resolution: .001dpcm) {
    // Target only Safari browsers
    @supports (-webkit-appearance:none) {
      // Use `focus` instead of `focus-visible`
      &:focus {
        @include focus-ring;
      }

      // due to Safari's lack of support
    }
  }

  &:focus-visible {
    @include focus-ring;
  }
}