@use "sass:math";

@mixin loading-cover-size($size, $offset: 0) {
  &::after {
    width: $size;
    height: $size;
    margin-top: math.div($size, -2) + $offset;
    margin-left: math.div($size, -2) + $offset;
  }
}

@mixin ui-loading-cover--old {
  position: relative;

  pointer-events: none;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 98;

    content: '';
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;

    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 100%;
    transform-origin: center center;

    animation: rotate $ui-duration-slow linear infinite;

    content: '';
  }

  @include loading-cover-size(24px);
  &--sm {
    @include loading-cover-size(14px);
  }
  &--lg {
    @include loading-cover-size(34px);
  }

  &--no-bg::before {
    background: transparent;
  }

  &.ui-btn {
    @include loading-cover-size(8px, -1px);

    color: transparent;
    > * {
      opacity: 0;
    }
    &::before {
      background: none;
    }

    &::after {
      border-color: ui-color('charcoal-ink-medium');
      border-top-color: rgba(ui-color('charcoal-ink-medium'), 0.1);
      border-left-color: rgba(ui-color('charcoal-ink-medium'), 0.1);
    }

    &.ui-btn--lg,
    &.ui-btn--xl {
      @include loading-cover-size(12px, -1px);
    }
  }

  &.ui-loading-container {
    min-height: 50vh;

    @include ui-from($ui-bp-tablet) {
      height: 20vh;
      max-height: 400px;
    }
  }
}

@mixin ui-loading-cover {
  position: relative;

  pointer-events: none;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 98;

    background: ui-color(white);

    content: '';
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;

    border: 2px solid ui-color(coral);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 100%;
    transform-origin: center center;

    animation: rotate $ui-duration-slow linear infinite;

    content: '';
  }

  @include loading-cover-size(24px);
  &--sm {
    @include loading-cover-size(14px);
  }
  &--lg {
    @include loading-cover-size(34px);
  }

  &--no-bg::before {
    background: transparent;
  }

  &.ui-btn {
    @include loading-cover-size(8px, -1px);

    color: transparent;
    > * {
      opacity: 0;
    }
    &::before {
      background: none;
    }

    &::after {
      border-color: ui-color(coral);
      border-top-color: rgba(ui-color(coral), 0.1);
      border-left-color: rgba(ui-color(coral), 0.1);
    }

    &.ui-btn--lg,
    &.ui-btn--xl {
      @include loading-cover-size(12px, -1px);
    }
  }

  &.ui-loading-container {
    min-height: 50vh;

    @include ui-from($ui-bp-tablet) {
      height: 20vh;
      max-height: 400px;
    }
  }
}