godaddy-wordpress/go

/* stylelint-disable */
.switcher__wrapper {
    margin-top: 14px;

    .switcher__choice {
        cursor: pointer;
        display: block;
        margin-bottom: 10px;
        position: relative;
        border-radius: 3px;
        background: #ffffff;

        .label {
            backdrop-filter: blur(10px) saturate(150%);
            background: rgba(0,0,0, 0.5);
            border-radius: 0 0 3px 3px;
            bottom: 0;
            box-sizing: border-box;
            color: #ffffff;
            padding: 5px 9px 6px;
            position: absolute;
            text-shadow: 0 0 2px rgba(0,0,0, 0.25);
            width: 100%;
        }

        img {
            background: #ffffff;
            border-radius: 3px;
            vertical-align: middle;
            height: 65px;
            width: 100%;
        }
    }

    label {
        position: relative;
    }

    label[for^="header_variation"] img,
    label[for^="footer_variation"] img {
        border: 1px solid #ccc;
    }

    input[type="radio"] {
        height: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        width: 0;
    }

    input[type="radio"]:hover + img {
            border-color: #999;
    }

    input[type="radio"]:focus + img,
    input[type="radio"]:checked + img {
        border-color: #0085ba;
           box-shadow: 0 0 0 1px #0085ba;
    }
}

.switcher__wrapper.color_scheme {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0;

    & .switcher__choice {
        height: 70px;
        width: calc(50% - 7.5px);
        margin-bottom: 15px;

        & .color-scheme {
            border-radius: 3px;
            display: block;
            height: 100%;
            overflow: hidden;
            width: 100%;
        }
    }

    input[type="radio"]:hover + .color-scheme,
    input[type="radio"]:focus + .color-scheme {
           box-shadow: 0 0 0 2px #eeeeee, 0 0 0 3px #5b9dd9, 0 0 2px 3px rgba(30,140,190,.8);
    }

    .color-scheme__check {
        bottom: 2px;
        cursor: pointer;
        display: inline-block;
        height: 28px;
        opacity: 0;
        position: absolute;
        right: 0px;
        vertical-align: middle;
        visibility: hidden;
        width: 28px;
        z-index: 9;

        &::before,
        &::after {
            background-color: #ffffff;
            border-radius: 6px;
            content: " ";
            height: 24px;
            left: 10px;
            position: absolute;
            top: 15px;
            transition: opacity 0.2s;
            width: 2px;
        }

        &:before {
            height: 13px;
            transform: translate3d(3px, -6px, 0) rotate(45deg);
        }

        &:after {
            height: 6px;
            transform: translate3d(-3px, -1px, 0) rotate(-45deg);
        }
    }

    input[type="radio"]:checked + .color-scheme {
        box-shadow: 0 0 0 2px #eeeeee, 0 0 0 3px #5b9dd9, 0 0 2px 3px rgba(30,140,190,.8);

        + .color-scheme__check {
            opacity: 1;
            visibility: visible;
        }
    }
}

/* stylelint-enable */