@use '@angular/material' as mat;
@use 'sass:math' as math;

$loader-border-width: 2px;
$loader-width: 1.25rem;
$loader-animation: pgh-loader-animation 1.9s infinite ease-in-out;

@mixin private-pgh-loader-width-height($widthHeight) {
  width: $widthHeight;
  height: $widthHeight;
  margin-top: -(math.div($widthHeight, 2));
  margin-inline-end: -(math.div($widthHeight, 2));
}

@mixin private-pgh-loader-config($config) {
  [data-pgh-loader~='#{$config}'] {
    @content;
  }
}

@mixin private-pgh-loader-active() {
  &.pgh-loader-active {
    @content;
  }
}

@mixin private-pgh-loader-color($color-variable) {
  border: $loader-border-width solid var(--#{$color-variable}-700);
  border-inline-start-color: var(--#{$color-variable}-50);
}

@keyframes pgh-loader-animation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

[data-pgh-loader] {
  position: relative;

  &::after {
    content: '';
    border-radius: 50%;
    @include private-pgh-loader-color(primary);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    @include private-pgh-loader-width-height($loader-width);
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  &::before {
    opacity: 0;
    visibility: hidden;
  }

  @include private-pgh-loader-active {
    &::after {
      opacity: 1 !important;
      visibility: visible !important;
      animation: $loader-animation;
      display: initial;
    }

    &::before {
      opacity: 1;
      display: initial;
      visibility: visible;
    }
  }
}

@include private-pgh-loader-config(button) {
  @include private-pgh-loader-active {
    > * {
      visibility: hidden;
      opacity: 0;
    }
  }
}

@include private-pgh-loader-config(accent) {
  &::after {
    @include private-pgh-loader-color(accent);
  }
}

@include private-pgh-loader-config(overlay) {
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: all 0.2s ease;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- using alpha */
    background: hsl(0deg 0% var(--lightness-300) / 20%);
    @supports (backdrop-filter: blur(1px)) {
      backdrop-filter: blur(1px);
    }
  }
}
@include private-pgh-loader-config(small) {
  &::after {
    @include private-pgh-loader-width-height(12px);
  }
}
@include private-pgh-loader-config(big) {
  &::after {
    @include private-pgh-loader-width-height(48px);
    border-width: 3px;
  }
}