@use "sass:map";
@use "vuetify/lib/styles/settings/_index.sass" as vuetify_settings;
@use "@styles/variables/_vuetify.scss" as vuetify;

@mixin themed($property, $light-value, $dark-value) {
  @at-root {
    .v-theme {
      &--light {
        #{$property}: $light-value;
      }

      &--dark {
        #{$property}: $dark-value;
      }
    }
  }
}

// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
@mixin before-pseudo() {
  position: relative;

  &::before {
    position: absolute;
    border-radius: inherit;
    background: currentcolor;
    block-size: 100%;
    content: "";
    inline-size: 100%;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
}

// ——— Light background generator ——————— //
// ℹ️ With this you have to give text color to the component you want light bg
// e.g. class="avatar-initial text-primary" for primary light bg
@mixin light-bg-provider($component, $inner-selector: "", $opacity: 0.12) {
  .#{$component}.#{$component}-light-bg #{$inner-selector} {
    background-color: transparent !important;

    &.bg-static-white {
      background-color: white !important;
    }

    &::before {
      position: absolute;
      border-radius: inherit;
      background-color: currentcolor;
      content: "";
      inset: 0;
      opacity: $opacity;
      pointer-events: none;
    }
  }
}

@mixin avatar-font-sizes($map: $avatar-sizes) {
  @each $sizeName, $multiplier in vuetify_settings.$size-scales {
    /* stylelint-disable-next-line scss/no-global-function-names */
    $size: map.get($map, $sizeName);

    &.v-avatar--size-#{$sizeName} {
      font-size: #{$size}px;
    }
  }
}

@mixin elevation($z, $important: false) {
  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
}

@mixin bordered-skin($component, $border-property: "border", $important: false) {
  #{$component} {
    box-shadow: none !important;
    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
  }
}

@mixin selected-states($selector) {
  #{$selector} {
    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
  }

  &:hover
  #{$selector} {
    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
  }

  &:focus-visible
  #{$selector} {
    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
  }

  @supports not selector(:focus-visible) {
    &:focus {
      #{$selector} {
        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
      }
    }
  }
}

@mixin push-anchors() {
  :target {
    scroll-margin-block-start: 90px;
  }
}

@mixin xs {
  @media (width >= 0) and (width <= 599.98px) {
    @content;
  }
}

@mixin sm {
  @media (width >= 600px) and (width <= 959.98px) {
    @content;
  }
}

@mixin md {
  @media (width >= 960px) and (width <= 1279.98px) {
    @content;
  }
}

@mixin lg {
  @media (width >= 1280px) and (width <= 1919.98px) {
    @content;
  }
}

@mixin xl {
  @media (width >= 1920px) {
    @content;
  }
}