@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';
@use 'sass:list';

@use './variables.scss' as *;

@mixin basis($inherit: true) {
  & {
    font-family: value('font-family-base');
    font-size: value('font-size-base');
    font-variant-numeric: tabular-nums;
    line-height: value('line-height-base');
    color: value('content-color-base');
    @content;
  }

  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  @if $inherit {
    &--inherit {
      font-family: inherit;
      font-size: inherit;
      font-variant-numeric: inherit;
      line-height: inherit;
    }
  }
}

@mixin inherit-color {
  &--inherit {
    color: inherit;
  }
}

@mixin fixed {
  & {
    position: fixed;
    inset: 0;
    @content;
  }
}

@mixin inner-fixed {
  & {
    position: absolute;
    inset: 0;
    @content;
  }
}

@mixin clear-both {
  &::before,
  &::after {
    display: table;
    content: '';
  }
}

@mixin clean-button {
  & {
    padding: 0;
    appearance: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: 0;
    @content;
  }
}

@mixin query-media($point) {
  @if map.has-key($break-point-map, $point) {
    @media screen and #{meta.inspect(map.get($break-point-map, $point))} {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin rtl {
  $self: #{&};

  @at-root {
    html.rtl,
    html[dir='rtl'] {
      #{$self} {
        @content;
      }
    }
  }
}

@mixin around-border($border-color, $border-radius, $duration: 2000ms) {
  & {
    position: relative;
    @content;
  }

  &::before {
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    content: '';
    border: value('border-shape') $border-color;
    border-radius: $border-radius;
    transition: value('transition-border'), value('transition-opacity');
    animation: vxp-border-clip $duration infinite linear;
  }
}

@mixin round-border($border-color, $duration: 2000ms) {
  & {
    position: relative;
    @content;
  }

  &::before {
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    clip-path: inset(0 0 50% 50%);
    pointer-events: none;
    content: '';
    border: value('border-shape') $border-color;
    border-radius: 50%;
    transition: value('transition-border'), value('transition-opacity');
    transform-origin: 50% 50%;
    animation: vxp-border-round $duration infinite linear;
  }
}

@mixin h-moving-border($border-color, $duration: 2000ms) {
  & {
    position: relative;
    will-change: inset;
    @content;
  }

  &::before {
    position: absolute;
    inset: -4px 25% auto;
    width: auto;
    height: 0;
    content: '';
    border-top: value('border-shape') $border-color;
    transition: value('transition-border'), value('transition-opacity');
    animation: vxp-h-moving-border $duration infinite;
  }

  &::after {
    position: absolute;
    inset: auto 25% -4px;
    width: auto;
    height: 0;
    content: '';
    border-top: value('border-shape') $border-color;
    transition: value('transition-border'), value('transition-opacity');
    animation: vxp-h-moving-border $duration #{math.div(-$duration, 2)} infinite;
  }
}

@mixin v-moving-border($border-color, $duration: 2000ms) {
  & {
    position: relative;
    will-change: inset;
    @content;
  }

  &::before {
    position: absolute;
    inset: 25% auto 25% -4px;
    width: 0;
    height: auto;
    content: '';
    border-inline-start: value('border-shape') $border-color;
    transition: value('transition-border'), value('transition-opacity');
    animation: vxp-v-moving-border $duration infinite;
  }

  &::after {
    position: absolute;
    inset: 25% -4px 25% auto;
    width: 0;
    height: auto;
    content: '';
    border-inline-start: value('border-shape') $border-color;
    transition: value('transition-border'), value('transition-opacity');
    animation: vxp-v-moving-border $duration #{math.div(-$duration, 2)} infinite;
  }
}

@mixin logical-radius($values) {
  @if list.nth($values, 1) {
    border-start-start-radius: list.nth($values, 1);
  }

  @if list.nth($values, 2) {
    border-start-end-radius: list.nth($values, 2);
  }

  @if list.nth($values, 3) {
    border-end-end-radius: list.nth($values, 3);
  }

  @if list.nth($values, 4) {
    border-end-start-radius: list.nth($values, 4);
  }
}