/*
 * 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 Stepper component */
@layer components {
    .stepper {
        margin-block: var(--space-xl);
        padding-left: var(--space-l);
        border-left: 2px solid var(--color-on-surface);
        position: relative;

        & .stepper__title {
            font-size: var(--size-step-0);
            text-transform: uppercase;
            margin-bottom: var(--space-l);
            position: relative;
            left: calc(-1 * var(--space-l) - 1px);
            background: var(--color-surface);
            padding-left: var(--space-s);
            width: fit-content;
        }

        & .stepper__list {
            display: flex;
            flex-direction: column;
            gap: var(--space-xl);
        }

        & .stepper__item {
            display: flex;
            gap: var(--space-m);
            align-items: flex-start;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: calc(-1 * var(--space-l) - 6px);
                top: 10px;
                width: 10px;
                height: 10px;
                background: var(--color-on-surface);
                transform: rotate(45deg);
            }
            & .stepper__stamp{
                color: var(--color-on-surface);
            }
        }

        & .stepper__stamp {
            border: 2px solid var(--color-on-surface);
            padding: 2px 5px;
            font-weight: bold;
            font-size: var(--size-step--2);
            transform: rotate(-5deg);
            background: var(--color-surface);
        }

        & .stepper__content {
            display: flex;
            flex-direction: column;
        }

        & .stepper__label {
            font-weight: bold;
            font-size: var(--size-step-0);
        }

        & .stepper__desc {
            font-size: var(--size-step--1);
            opacity: 0.8;
        }

        & .stepper__item--active {
            &::before {
                background: #b22222;
                box-shadow: 0 0 10px rgba(178, 34, 34, 0.5);
            }

            & .stepper__stamp {
                border-color: #b22222;
                color: #b22222;
            }
        }
    }

    [data-theme="dark"] .stepper {
        & .stepper__item--active {
            &::before {
                background: #ff4d4d;
            }

            & .stepper__stamp {
                border-color: #ff4d4d;
                color: #ff4d4d;
            }
        }
    }
}