/*
 * 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 RevenueStamp component */
@layer components {
    .revenue-stamp {
        width: 60px;
        height: 60px;
        background-color: #d5d6d4;
        position: relative;
        padding: 4px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(5deg);
        z-index: 10;
        margin-left: auto;
        margin-bottom: var(--space-m);

        /* Serrated edges (zúbkované okraje) */

        &::before {
            content: "";
            position: absolute;
            inset: -4px;
            background-image: radial-gradient(circle at 4px 4px, var(--color-surface) 0, var(--color-surface) 3px, transparent 3px, transparent 100%);
            background-size: 8px 8px;
            z-index: -1;
        }

        & .revenue-stamp__inner {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--clr-bureau-blue);
            text-align: center;
            position: relative;
            overflow: hidden;
            background-color: #d5d6d4;
        }

        & .revenue-stamp__value {
            font-size: var(--size-step--1);
            font-weight: bold;
            line-height: 1;
        }

        & .revenue-stamp__label {
            font-size: var(--size-step--2);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            opacity: 0.8;
            margin-top: 2px;
            font-weight: bold;
        }

        /* Cancel line (znehodnotenie perom) */

        & .revenue-stamp__cancel-line {
            position: absolute;
            top: 50%;
            left: -10%;
            width: 120%;
            height: 2px;
            background: #00008b; /* Blue ink color */
            transform: rotate(-35deg);
            opacity: 0.7;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
            pointer-events: none;

            &::after {
                content: "";
                position: absolute;
                top: 10px;
                left: 0;
                width: 100%;
                height: 1px;
                background: #00008b;
                transform: rotate(5deg);
            }
        }
    }

    [data-theme="dark"] .revenue-stamp {
        background-color: #483d8b; /* Darker slate blue */

        &::before {
            background-image: radial-gradient(circle at 4px 4px, var(--color-surface) 0, var(--color-surface) 3px, transparent 3px, transparent 100%);
        }

        & .revenue-stamp__cancel-line {
            background: #add8e6; /* Light blue ink for dark mode */

            &::after {
                background: #add8e6;
            }
        }
    }
}