@use 'sass:map';

//
// Clearfix
//
@use '../config' as *;

.clearfix {
  @include clearfix();
}

//
// Text truncation
//
.text-truncate {
  @include text-truncate();
}

//
// Vertical rule
//
.vr {
  display: inline-block;
  align-self: stretch;
  width: $vr-border-width;
  min-height: 1em;
  background-color: currentColor;
  opacity: $hr-opacity;
}

//
// Stretched link
//
.stretched-link {
  &::after {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    content: '';
  }

  // .btn is positioned, which would make the button itself the containing block
  &.btn {
    position: static;
  }
}

//
// Visually hidden
//
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  @include visually-hidden();
}

//
// Stacks
//
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

//
// Position
//
// Shorthand

.fixed-top {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  z-index: $zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  z-index: $zindex-fixed;
}

// Responsive sticky top and bottom
@each $breakpoint in map.keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .sticky#{$infix}-top {
      position: sticky;
      top: 0;
      z-index: $zindex-sticky;
    }

    .sticky#{$infix}-bottom {
      position: sticky;
      bottom: 0;
      z-index: $zindex-sticky;
    }
  }
}

//
// Aspect ratio
//
.ratio {
  position: relative;
  width: 100%;

  &::before {
    display: block;
    padding-top: var(--aspect-ratio);
    content: '';
  }

  > * {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

@each $key, $ratio in $aspect-ratios {
  .ratio-#{$key} {
    --aspect-ratio: #{$ratio};
  }
}

//
// Focus ring
//
.focus-ring {
  @include focus-ring-transition();
}

.focus-ring:focus-visible {
  @include focus-ring($color: var(--focus-ring-color));
}