@import "variables";

.vendure-intro {
    .intro-storefront {
        display: flex;
        flex-direction: column;
        padding: calc(0.05 * var(--width-unit));
        width: calc(2 * var(--width-unit));
        height: calc(2 * var(--width-unit));
        transition: opacity $transition-duration;

        .intro-top-bar {
            background-color: #494949;
            color: #999;
            height: calc(0.3 * var(--width-unit));
            font-size: calc(0.2 * var(--width-unit));
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            user-select: none;
        }

        .intro-content {
            background-color: #fff;
            flex: 1;
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: calc(0.05 * var(--width-unit));
            padding: calc(0.05 * var(--width-unit));

            li {
                position: relative;
                background-color: #c0c1c7;
                height: 100%;
                width: 100%;
                margin-bottom: calc(0.08 * var(--width-unit));
                border-radius: calc(0.01 * var(--width-unit));

                &:before {
                    content: '';
                    position: absolute;
                    background-color: #e2e4ee;
                    background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgb(231, 228, 228) 100%);
                    width: calc(0.5 * var(--width-unit));
                    height: calc(0.5 * var(--width-unit));
                    top: calc(0.03 * var(--width-unit));
                    left: calc(0.03 * var(--width-unit));
                }

                &:after {
                    content: '';
                    position: absolute;
                    background-color: #2a82bea1;
                    width: calc(0.2 * var(--width-unit));
                    height: calc(0.1 * var(--width-unit));
                    bottom: calc(0.05 * var(--width-unit));
                    right: calc(0.03 * var(--width-unit));
                    border-radius: calc(0.01 * var(--width-unit));
                }
            }
        }
    }
}