// Rôle : fournit les mixins Sass partagés du thème.
@mixin border-mask {
  mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  mask-origin:
    content-box,
    border-box;
  mask-clip:
    content-box,
    border-box;
  mask-composite: exclude;
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-origin:
    content-box,
    border-box;
  -webkit-mask-clip:
    content-box,
    border-box;
  -webkit-mask-composite: xor;
}

@mixin gold-panel-frame($transition: false) {
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;

    @include border-mask;

    @if $transition {
      transition: background var(--duration-fast) var(--ease-standard);
    }
  }

  &::before {
    background: rgba(165, 180, 252, 0.14);
  }

  &::after {
    background:
      radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.52) 0 18px, transparent 27px),
      linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%),
      linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
  }
}

@mixin temporary-toggle-active($text-color: var(--color-text-primary)) {
  border-color: rgba(246, 196, 83, 0.46);
  background:
    radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.16), transparent 48%) padding-box,
    linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(246, 196, 83, 0.02) 42%, rgba(21, 26, 48, 0.04)) padding-box,
    linear-gradient(135deg, rgba(13, 17, 34, 0.92), rgba(21, 26, 48, 0.82)) padding-box,
    linear-gradient(120deg, rgba(246, 196, 83, 0.86), rgba(255, 244, 196, 0.76), rgba(246, 196, 83, 0.72)) border-box;
  color: $text-color;
  box-shadow:
    inset 0 -2px 0 rgba(246, 196, 83, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}