.product-configurator__wrapper {
    background: rgb(var(--color-background));

    .product-configurator__content {
        display: flex;
        padding-top: 30px;

        @media only screen and (max-width: 1020px) {
            padding-bottom: 7rem;
        }
        @media only screen and (max-width: 880px) {
            flex-direction: column;
            padding-top: 0;
            padding-bottom: 0;
        }

        .product-configurator__sidebar.grid__item {
            @media only screen and (max-width: 880px) {
                max-width: 100%;
            }
        }

        .product-configurator__sidebar {
            width: 36%;
            @media only screen and (max-width: 880px) {
                width: 100%;
            }

            .product-configurator__price {
                margin: 1.5rem 0 2rem 0;

                .price__container {
                    display: block;
                }

                .product__text-second {
                    margin-top: 0;
                }
            }

            .product-configurator__buttons {
                margin: 3.5rem 0;
            }
        }

        .product-configurator__configurator {
            width: 64%;
            position: sticky;
            height: 600px;
            top: 5rem;

            @media only screen and (max-width: 1020px) {
                height: 530px;
            }
            @media only screen and (max-width: 880px) {
                width: 100%;
                position: relative;
            }
            @media only screen and (max-width: 450px) {
                height: 430px;
                position: relative;
            }

            img, svg {
                position: absolute;
                width: auto;
                height: 600px;
                left: 0;
                right: 0;
                margin: 0 auto;
                @media only screen and (max-width: 880px) {
                    height: 500px;
                }
                @media only screen and (max-width: 450px) {
                    height: 400px;
                }
            }

            .product-configurator__toothsvg {
                fill: #fff;
                fill-opacity: 0;
                stroke: #e8b01b;
                stroke-opacity: 0;
                stroke-width: 3px;
                cursor: pointer;

                /* Hover effect permanently on for touchscreens */
                @media (pointer: coarse) {
                    fill-opacity: .2;
                    stroke-opacity: .9;
                }

            }

            .product-configurator__toothsvg:hover {
                fill-opacity: .4;
                stroke-opacity: .9 !important;
            }

            #product-configurator__teethsvg {
                &.gelbgold path {
                    stroke: #e8b01b;
                }

                &.rotgold path {
                    stroke: #c63d33;
                }

                &.weißgold path {
                    stroke: #ffffff;
                }

                &.chrom path {
                    stroke: #171717;
                }

                &.silber path {
                    stroke: #525c68;
                }
            }

        }

        .product-configurator__settings {
            .product-form__input:disabled input[type="radio"]:checked + label {
                background-color: rgba(0, 0, 0, 0.1);
            }

            .product-configurator__label {
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
            }

            .product-configurator__icons {
                border-radius: 100%;
                margin: -6px 10px -6px -15px;
                box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
            }

            .product-configurator__icons-model-frame {
                filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            }
        }

        .hide {
            display: none;
        }

        .product-configurator__pointer-wrapper {
            position: relative;
            height: 0;
            width: 0;
        }

        #product-configurator__pointer {
            animation: 1s alternate ease-in-out point infinite;
            position: absolute;
            height: 100px;
            width: 100px;
            top: 70px;
            left: 130px;
            z-index: 2;

            @media only screen and (max-width: 880px) {
                height: 80px;
                width: 80px;
                top: 60px;
                left: 210px;
            }
            @media only screen and (max-width: 450px) {
                height: 50px;
                width: 50px;
                top: 60px;
                left: 85px;
            }
        }

        #product-configurator__price-number.loading:before {
            animation: dots 1s linear infinite;
            content: "    €";
        }
    }
}

/* does not work if within nested selectors above, not sure why */
.tooth-pulse {
    animation: 1.6s alternate linear pulse-stroke infinite;

    @media (pointer: coarse) {
        animation: 1.6s alternate linear pulse-stroke-reverse infinite;
    }

    &.pulse-5 {
        animation-delay: 0s;
    }

    &.pulse-6 {
        animation-delay: .2s;
    }

    &.pulse-7 {
        animation-delay: .4s;
    }

    &.pulse-8 {
        animation-delay: .6s;
    }

    &.pulse-9 {
        animation-delay: .8s;
    }

    &.pulse-10 {
        animation-delay: 1s;
    }

    &.pulse-11 {
        animation-delay: 1.2s;
    }

    &.pulse-12 {
        animation-delay: 1.4s;
    }

    &.pulse-21 {
        animation-delay: 3s;
    }

    &.pulse-22 {
        animation-delay: 2.8s;
    }

    &.pulse-23 {
        animation-delay: 2.6s;
    }

    &.pulse-24 {
        animation-delay: 2.4s;
    }

    &.pulse-25 {
        animation-delay: 2.2s;
    }

    &.pulse-26 {
        animation-delay: 2s;
    }

    &.pulse-27 {
        animation-delay: 1.8s;
    }

    &.pulse-28 {
        animation-delay: 1.6s;
    }
}

@keyframes pulse-stroke {
    0%, 75% {
        stroke-opacity: 0;
    }
    100% {
        stroke-opacity: 1;
    }
}

@keyframes pulse-stroke-reverse {
    0%, 75% {
        stroke-opacity: 1;
    }
    100% {
        stroke-opacity: 0;
    }
}

@keyframes point {
    0% {
        transform: rotate(135deg) translate(0, 0);
    }
    100% {
        transform: rotate(135deg) translateY(10px);
    }
}

@keyframes dots {
    0%, 20% {
        content: ".   €";
    }
    40% {
        content: "..  €";
    }
    60% {
        content: "... €";
    }
    90%, 100% {
        content: "    €";
    }
}

.scrolled-past-header .header {
    pointer-events: none;
}

.scrolled-past-header .header__icon {
    pointer-events: all
}

.header__inline-menu {
    pointer-events: all
}