/* Licensed to the Chroma Control Contributors under one or more agreements. */
/* The Chroma Control Contributors licenses this file to you under the MIT license. */
/* See the LICENSE file in the project root for more information. */

.theme-selector {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--spacing-half) * -1);
}

.theme {
    display: block;
    flex-shrink: 0;
    padding: var(--spacing-half);
    position: relative;
    width: 50%;
    margin: 0;
}

    .theme > ::deep input[type=radio] {
        position: absolute;
        left: var(--spacing-half);
        margin-top: calc(54.5%);
    }

        .theme > ::deep input[type=radio]:checked + label {
            border-color: var(--border-color-accent);
        }

    .theme > label {
        border: var(--base-border);
        border-radius: 2px;
        float: left;
        overflow: hidden;
        padding-bottom: var(--spacing-half);
        width: 100%;
        margin: 0;
    }

.theme-image {
    width: 100%;
    border-bottom: var(--base-border);
    margin-bottom: var(--spacing-half);
    display: block;
}

.theme-label {
    margin-left: var(--spacing-triple);
}

.theme-system {
    width: 100%;
    position: relative;
    display: block;
}

    .theme-system img {
        top: 0;
    }

        .theme-system img:first-child {
            position: inherit;
        }

        .theme-system img:last-child {
            position: absolute;
            clip-path: polygon(50% 0%, 110% 0%, 110% 100%, 50% 100%);
        }
