@use "../config";
@use "../variables";
@use "../mixins";
@use "sass:map";

// Rotate
.rotate {
  &-45 {
    @extend %rotate-45;
  }
  &-90 {
    @extend %rotate-90;
  }
  &-180 {
    @extend %rotate-180;
  }
}

// Transparent
.transparent {
  background: transparent !important;
  border-color: transparent !important;
}

// Inverted
.inverted {
  @extend %inverted;
}

.animated.fastest {
  animation-duration: var(--transitions);
}

// Screen reader only
.sr-only {
  // https://a11yproject.com/posts/how-to-hide-content/
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute !important;
}

// Loader
@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}
%loader,
.loader {
  animation: rotation 1s infinite linear;
  border: 2px solid map.get(config.$loader-colors, "primary");
  border-radius: map.get(variables.$radius, "round");
  border-top-color: map.get(config.$loader-colors, "primary-top");
  margin: 0;
  @include mixins.square(1.4rem);
  @include mixins.square(1.4rem, "min");
}

.loader {
  &.inverted {
    border-color: map.get(config.$loader-colors, "inverted");
    border-top-color: map.get(config.$loader-colors, "inverted-top");
  }

  &--sm {
    @include mixins.square(0.9rem);
    @include mixins.square(0.9rem, "min");
  }

  &--lg {
    @include mixins.square(2rem);
    @include mixins.square(2rem, "min");
  }
}

// Cursors
$cursors: (pointer, default, not-allowed, help);

.pointer {
  cursor: pointer !important;
}

@each $cursor in $cursors {
  .cursor {
    &--#{$cursor} {
      cursor: $cursor !important;
    }
  }
}

// Position
@each $key, $val in variables.$positions {
  .pos-#{$key} {
    position: #{$val} !important;
  }
}

@each $pos, $letter in variables.$xy-border {
  .pin-#{$pos} {
    #{$pos}: 0 !important;
  }

  .pin-center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);

    &-#{$pos} {
      #{$pos}: 50% !important;
      @if $pos == top {
        transform: translateY(-50%);
      }
      @if $pos == bottom {
        transform: translateY(50%);
      }
      @if $pos == left {
        transform: translateX(-50%);
      }
      @if $pos == right {
        transform: translateX(50%);
      }
    }
  }
}

// Rounded
$corners: (
  "tl": "top-left",
  "tr": "top-right",
  "bl": "bottom-left",
  "br": "bottom-right",
);

// rounded corners based on $spacers map
@each $unit, $rem in variables.$spacers {
  .rounded-#{$unit},
  .rounded--#{$unit} {
    border-radius: #{$rem} !important;
  }

  @each $corner, $value in $corners {
    .rounded-#{$corner}--#{$unit} {
      border-#{$value}-radius: #{$rem} !important;
    }
  }
}

// Height and Width
@each $size, $letter in (height: h, width: w) {
  @each $number, $value in variables.$quarter-values {
    .#{$letter}-#{$number} {
      #{$size}: #{$value};
    }
  }
  .#{$letter} {
    &-auto {
      #{$size}: auto !important;
    }
  }
}

@each $size, $letter in (height: vh, width: vw) {
  @each $number, $value in variables.$quarter-values {
    .#{$letter}-#{$number} {
      @if $letter == vh {
        #{$size}: #{$number}vh;
      } @else {
        #{$size}: #{$number}vw;
      }
    }
  }
}

// Overflow
@each $key, $value in variables.$overflow {
  .overflow-#{$key} {
    overflow: #{$value} !important;
  }

  @each $axis, $letter in (y: y, x: x) {
    .overflow-#{$letter}--#{$key} {
      overflow-#{$letter}: #{$value} !important;
    }
  }
}

// Scale Hover
.hover-scale {
  transition: transform var(--transitions);

  &:hover {
    transform: scale(1.05);
  }
}

// Shadow Hover
.hover-shadow {
  transition: box-shadow var(--transitions);

  &:hover {
    box-shadow: 0 0 6px 3px map.get(variables.$greyscale, "lighter");
  }
}

// Transition
.transition {
  transition: var(--transitions);
}

.scrollbar {
  @extend %scrollbar;
}

// Truncate with ellipsis
.truncate-with-ellipsis {
  @extend %truncate-with-ellipsis;
}