/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Stamp component */
@layer components {
  .stamp {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    z-index: 20;
    pointer-events: none;
    transform: rotate(-15deg);

    & .stamp__inner {
      border: 4px double currentColor;
      padding: var(--space-xs) var(--space-s);
      font-size: var(--size-step-2);
      font-weight: 900;
      text-transform: uppercase;
      opacity: 0.6;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.4)),
                  url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
      mask-size: cover;
    }

    &[data-color="red"] {
      color: #b22222;
    }

    &[data-color="blue"] {
      color: #00008b;
    }
  }

  [data-theme="dark"] .stamp {
    &[data-color="red"] {
      color: #ff4d4d;
    }
    &[data-color="blue"] {
      color: #add8e6;
    }
  }
}