////
/// Logo Tool
/// @group logo
////

@use "sass:math";
@use 'src/module/spacing';
@use 'src/module/preference';

@mixin logo-size($size) {
  $font-size: spacing.space(map-get($logo-sizes, $size));
  font-size: #{$font-size * 1.05};

  @include before {
    @include size(#{2.75 * $font-size}, #{$font-size});
    @include margin-bottom(#{math.div($font-size, 3)});
    background-size: #{2.75 * $font-size} #{1.125 * $font-size}, #{2.75 * $font-size} #{$font-size}, 0;
    background-position: 0 #{(-0.0625 * $font-size)}, 0 0, 0 0;

    @at-root :root#{ns-attr(mourning)} #{&} {
      background-size: #{2.75 * $font-size} #{1.125 * $font-size}, 0, #{2.75 * $font-size} #{$font-size};
    }
  }

  @include after {
    min-width: #{2.625 * $font-size};
    background-size: #{5.25 * $font-size} #{3.75 * $font-size};
    background-position: 0 calc(100% + #{1.875 * $font-size});
    padding-top: #{(math.div(53, 24) * $font-size)};

    @at-root #{ns-attr(theme, 'dark')} #{&} {
      background-position: #{-2.625 * $font-size} 100%;
    }

    @media (prefers-color-scheme: dark) and (forced-colors: active) {
      background-position: #{-2.625 * $font-size} 100%;

      @at-root #{ns-attr(theme, 'dark')} #{&} {
        background-position: #{-2.625 * $font-size} 100%;
      }
    }

    @media (prefers-color-scheme: light) and (forced-colors: active) {
      background-position: 0 calc(100% + #{1.875 * $font-size});

      @at-root #{ns-attr(theme, 'dark')} #{&} {
        background-position: 0 calc(100% + #{1.875 * $font-size});
      }
    }
  }
}

@mixin logo($size: md, $size-md: null) {
  #{ns(logo)} {
    @include logo-size($size);
    @include padding(map-get($logo-sizes, $size));

    @if $size-md != null {
      @include respond-from(md) {
        @include logo-size($size-md);
        @include padding(map-get($logo-sizes, $size-md));
      }
    }

    @content;
  }
}