/* Irregular facet planes for gemstone Type controls. */
label:has(input[name="FiltersType"]) > div:last-child {
    background:
        linear-gradient(146deg,
            oklch(from var(--contrastColor) l c h / 0.32) 0 31%,
            transparent 31.5%),
        linear-gradient(24deg,
            transparent 0 56%,
            oklch(from var(--secondaryColor) l c h / 0.24) 56.5% 76%,
            transparent 76.5%),
        linear-gradient(163deg,
            transparent 0 62%,
            oklch(from var(--contrastOverlayColor) l c h / 0.08) 62.5% 100%);
    background-size: 100% 100%;
}

label:has(input[name="FiltersType"]) > div:last-child {
    position: absolute;
    inset: 0;
    opacity: 0.82;
    animation: fadeIn 750ms ease-in forwards;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    transition: filter 250ms ease-in-out;
}

label:has(input:checked ~ div:last-child) {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

label:has(input[name="FiltersType"]) > div:last-child:before,
label:has(input[name="FiltersType"]) > div:last-child:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-origin: 41% 44%;
}

label:has(input[name="FiltersType"]) > div:last-child:before {
    background: oklch(from var(--contrastColor) l c h / 0.22);
    clip-path: polygon(0 0, 67% 0, 41% 44%, 0 76%);
    transform: var(--type-facet-before);
}

label:has(input[name="FiltersType"]) > div:last-child:after {
    background: oklch(from var(--contrastOverlayColor) l c h / 0.10);
    clip-path: polygon(67% 0, 100% 0, 100% 58%, 41% 44%);
    transform: var(--type-facet-after);
}

label:has(> input[name="FiltersType"]) > div:first-of-type {
    background: var(--type-swatch);
}

label:has(> input[name="FiltersType"]):hover,
label:has(> input[name="FiltersType"]):has(input:checked) {
    background: var(--type-surface);
}

label:has(> input[name="FiltersType"]):is(:hover, :has(input:checked)) > div:last-child {
    filter: contrast(1.06) saturate(1.08);
}

label:has(> input[name="FiltersType"][value="SA"]) {
    --type-facet-before: rotate(8deg) scale(1.18);
    --type-facet-after: rotate(96deg) scale(1.18);
    --type-swatch: conic-gradient(
        rgba(0, 0, 139, 1.00) 0%,
        rgba(148, 0, 211, 1.00) 12.5%,
        rgba(255, 69, 0, 1.00) 37.5%,
        rgba(255, 223, 0, 1.00) 50%,
        rgba(0, 128, 0, 1.00) 62.5%,
        rgba(255, 255, 255, 1.00) 75%,
        rgba(0, 0, 128, 1.00) 87.5%,
        rgba(0, 0, 139, 1.00) 100%
    );
    --type-surface: conic-gradient(from 14deg at 47% 43%,
        rgba(0, 0, 139, 0.4) 0%,
        rgba(148, 0, 211, 0.4) 12.5%,
        rgba(255, 69, 0, 0.4) 37.5%,
        rgba(255, 223, 0, 0.4) 50%,
        rgba(0, 128, 0, 0.4) 62.5%,
        rgba(255, 255, 255, 0.4) 75%,
        rgba(0, 0, 128, 0.4) 87.5%,
        rgba(0, 0, 139, 0.4) 100%
    );
}

label:has(> input[name="FiltersType"][value="RU"]) {
    --type-facet-before: rotate(38deg) scale(1.18);
    --type-facet-after: rotate(-34deg) scale(1.18);
    --type-swatch: conic-gradient(
        rgba(220, 20, 60, 1.00) 0%,
        rgba(139, 0, 0, 1.00) 25%,
        rgba(187, 48, 80, 1.00) 50%,
        rgba(178, 34, 34, 1.00) 75%,
        rgba(220, 20, 60, 1.00) 100%
    );
    --type-surface: conic-gradient(from 58deg at 56% 51%,
        rgba(220, 20, 60, 0.4) 0%,
        rgba(139, 0, 0, 0.4) 25%,
        rgba(187, 48, 80, 0.4) 50%,
        rgba(178, 34, 34, 0.4) 75%,
        rgba(220, 20, 60, 0.4) 100%
    );
}

label:has(> input[name="FiltersType"][value="COR-PA"]) {
    --type-facet-before: rotate(-18deg) scale(1.18);
    --type-facet-after: rotate(132deg) scale(1.18);
    --type-swatch: conic-gradient(
        rgba(255, 204, 153, 1.00) 0%,
        rgba(255, 153, 102, 1.00) 25%,
        rgba(255, 204, 153, 1.00) 50%,
        rgba(255, 102, 51, 1.00) 75%,
        rgba(255, 204, 153, 1.00) 100%
    );
    --type-surface: conic-gradient(from 112deg at 44% 54%,
        rgba(231, 66, 11, 0.4) 0%,
        rgba(255, 153, 102, 0.4) 25%,
        rgba(255, 204, 153, 0.4) 50%,
        rgba(255, 102, 51, 0.4) 75%,
        rgba(255, 204, 153, 0.4) 100%
    );
}

label:has(> input[name="FiltersType"][value="semi"]) {
    --type-facet-before: rotate(164deg) scale(1.18);
    --type-facet-after: rotate(47deg) scale(1.18);
    --type-swatch: conic-gradient(
        rgba(0, 180, 255, 1.0) 0%,
        rgba(136, 255, 51, 1.0) 20%,
        rgba(170, 102, 255, 1.0) 40%,
        rgba(255, 228, 0, 1.0) 60%,
        rgba(255, 102, 34, 1.0) 80%
    );
    --type-surface: conic-gradient(from 206deg at 59% 39%,
        rgba(0, 180, 255, 0.5) 0%,
        rgba(136, 255, 51, 0.5) 20%,
        rgba(170, 102, 255, 0.5) 40%,
        rgba(255, 228, 0, 0.5) 60%,
        rgba(255, 102, 34, 0.5) 80%
    );
}

details:has(input[name="FiltersType"][value="SA"]:checked) ~ details:has(input[name="FiltersColor"][value="BL"]) label:has(> input[name="FiltersColor"][value="RE"]),
details:has(input[name="FiltersType"][value="RU"]:checked) ~ details:has(input[name="FiltersColor"][value="BL"]),
details:has(input[name="FiltersType"][value="COR-PA"]:checked) ~ details:has(input[name="FiltersColor"][value="BL"]) {
    display: none;
}

details label img,
details label svg {
    grid-column: span 2;
    max-width: 6em;
    height: auto;
    z-index: 1;
}

/* Color values */
label:has(> input[name="FiltersColor"][value="BL"]) {
    --color-surface: 153, 153, 255;
    --color-swatch: 41, 69, 255;
}

label:has(> input[name="FiltersColor"][value="PU"]) {
    --color-surface: 180, 76, 224;
    --color-swatch: 148, 0, 211;
}

label:has(> input[name="FiltersColor"][value="PK"]) {
    --color-surface: 255, 137, 201;
    --color-swatch: 255, 20, 147;
}

label:has(> input[name="FiltersColor"][value="PH"]) {
    --color-surface: 253, 142, 134;
    --color-swatch: 253, 94, 83;
}

label:has(> input[name="FiltersColor"][value="OR"]) {
    --color-surface: 255, 166, 76;
    --color-swatch: 255, 128, 0;
}

label:has(> input[name="FiltersColor"][value="YL"]) {
    --color-surface: 255, 255, 153;
    --color-swatch: 255, 255, 0;
}

label:has(> input[name="FiltersColor"][value="GR"]) {
    --color-surface: 48, 189, 157;
    --color-swatch: 11, 146, 27;
}

label:has(> input[name="FiltersColor"][value="WH"]) {
    --color-surface: 229, 229, 229;
    --color-swatch: 255, 255, 255;
    border: 1px solid #c0c0c0;
}

label:has(> input[name="FiltersColor"][value="RE"]) {
    --color-surface: 255, 76, 76;
    --color-swatch: 255, 0, 0;
}

/* Shared color presentation and states */
label:has(> input[name="FiltersColor"]) {
    background-color: rgba(var(--color-surface), 0.50);
}

label:has(> input[name="FiltersColor"]) div:first-of-type {
    background-color: rgba(var(--color-swatch), 0.50);
}

label:has(> input[name="FiltersColor"]):hover {
    background-color: rgba(var(--color-surface), 0.75);
}

label:has(> input[name="FiltersColor"]):hover div:first-of-type {
    background-color: rgba(var(--color-swatch), 0.75);
}

label:has(> input[name="FiltersColor"]):has(input:checked) {
    background-color: rgba(var(--color-surface), 1.00);
}

label:has(> input[name="FiltersColor"]):has(input:checked) div:first-of-type {
    background-color: rgba(var(--color-swatch), 1.00);
}

@media only screen and (max-width: 1000px) {
    /* Keep touch layouts at their resting color when a browser synthesizes hover. */
    label:has(> input[name="FiltersColor"]):hover {
        background-color: rgba(var(--color-surface), 0.50);
    }

    label:has(> input[name="FiltersColor"]):hover div:first-of-type {
        background-color: rgba(var(--color-swatch), 0.50);
    }
}

label:has(> input[name="FiltersMatching"][value="1"]):has(input:checked) svg g:first-of-type {
    animation: PairedLeft 500ms linear 1 normal forwards;
}

@keyframes PairedLeft {
    from {
        transform: translate(7.630455px, 15.308873px);
    }

    to {
        transform: translate(10.500738px, 18.023718px);
    }
}

label:has(> input[name="FiltersMatching"][value="1"]):has(input:checked) svg g:last-of-type {
    animation: PairedRight 500ms linear 1 normal forwards;
}

@keyframes PairedRight {
    from {
        transform: translate(18.289944px, 25.742831px);
    }

    to {
        transform: translate(16.385505px, 23.554753px);
    }
}