/* Version 1 */
/* Author: CD */
/* Start date: Aug 8, 23 */

@media(min-width: 1300px) {
    :root {
        --fs-cd-a11y: 16px;
    }
}

@media(min-width: 1800px) {
    :root {
        --fs-cd-a11y: 18px;
    }
}

.cd-a11y *{
    box-sizing: border-box;
}


.cd-a11y{
    --inner-radius-cd-a11y: 0.5em;
    --border-cd-a11y: #c9c9c9;
    --gutter-cd-a11y: 1.25em;
    --inside-gutter-cd-a11y: 1em;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 9999;
    isolation: isolate;
    overflow: auto;
    background-color: #121212ae;
    padding: 15px;
    place-items: center;
    font-size: var(--fs-cd-a11y, 15px);
    display: none;
}

.cd-a11y--inner{
    width: 100%;
    max-width: 33.33333333333333em;
    border-radius: var(--inner-radius-cd-a11y);
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-cd-a11y);
    padding-left: var(--gutter-cd-a11y);
    padding-right: var(--gutter-cd-a11y);
    padding-bottom: var(--gutter-cd-a11y);
    opacity: 0;
    transform: translateY(50px);
}

.cd-a11y--inner > *{
    padding: var(--inside-gutter-cd-a11y);
}

.cd-a11y--inner-header{
    display: grid;
    grid-auto-flow: column;
    gap: var(--inside-gutter-cd-a11y);
    justify-content: space-between;
    align-items: center;
    margin-left: calc(-1 * var(--gutter-cd-a11y));
    margin-right: calc(-1 * var(--gutter-cd-a11y));
    background: var(--clr-brown-b04b34);
    color: #fff;
    border-radius: var(--inner-radius-cd-a11y) var(--inner-radius-cd-a11y) 0 0;
}

.cd-a11y--heading{
    font-family: var(--ff-heading);
    font-size: 1.2em;
    font-weight: 500;   
}


.cd-a11y--heading > *{
    font: inherit;
}

.cd-a11y--actions{
    display: grid;
    grid-auto-flow: column;
    gap: 1em;
}

.cd-a11y--close {
   width: 1.15em;
   height: 1.15em;
   display: grid;
   place-items: center;
}

.cd-a11y--close::before,
.cd-a11y--close::after {
    content: '';
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    grid-row: 1;
    grid-column: 1;
}

.cd-a11y--close::before{
    transform: rotate(45deg);
}


.cd-a11y--close::after {
    transform: rotate(-45deg);
}

.cd-a11y--grp{
    display: grid;
    gap: var(--inside-gutter-cd-a11y);
    background-color: white;
    border-radius: inherit;
    box-shadow: 0 0 200px 0 #a0a0a024;
}

.cd-a11y--grp-heading{
    display: grid;
    grid-auto-flow: column;
    gap: var(--inside-gutter-cd-a11y);
    justify-content: space-between;
    align-items: center;
}

.cd-a11y--grp-heading *{
    font-weight: inherit;
}

.cd-a11y--grp-opt{
    --grid-count: 3;
    display: grid;
    grid-template-columns: repeat(var(--grid-count, 1), minmax(0, 1fr));
    gap: var(--inside-gutter-cd-a11y);
}

.cd-a11y--grp-opt  > *{
    padding: var(--inside-gutter-cd-a11y);
    border: 1px solid var(--border-cd-a11y);
    border-radius: 0.5em;
    font-size: 0.888em;
    font-weight: 500;
    color: #5a5a5a;
}

.cd-a11y--grp-opt  > *.actv{
    background-color: var(--clr-brown-af4a31);
    color: #fff;
}

.cd-a11y--btn-reset{
    font-weight: 500;
    line-height: 1;
    font-size: 0.72em;
    padding: 0.4em 1em;
    border: 1px solid currentColor;
    border-radius: 100em;
    visibility: hidden;
}

.cd-a11y--btn-reset.actv{
    visibility: visible;
}

.cd-a11y--btn-grp{
    display: grid;
    grid-auto-flow: column;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    overflow: hidden;
}

.cd-a11y--btn-grp > button{
    width: 2em;
    height: 2em;
    border-left: 1px solid var(--border-cd-a11y);
    border-right: 1px solid var(--border-cd-a11y);
    margin-left: -1px;
    margin-right: -1px;
    font-size: 1.5em;
}


.cd-a11y--btn-grp span{
   width: 8ch;
   text-align: center;
}

.cd-a11y--btn-grp p{
    grid-column: 1/-1;
    margin-right: 3em;
    color: #1c1c1c;
}

.fluid{
    grid-column: 1/-1;
}

@media(max-width: 560px){
    .cd-a11y{
        --gutter-cd-a11y: 0.75em;
        --inside-gutter-cd-a11y: 0.75em;
    }
    .cd-a11y--grp{
        grid-column: 1/-1;;
    }
    .cd-a11y--grp-opt{
        --grid-count: 2;
    }
}

.cd-a11y.cd-a11y--actv{
    display: grid;
}

.cd-a11y.cd-a11y--actv .cd-a11y--inner{
    animation: cd-a11y_anim ease-in-out 0.5s forwards;
}


@keyframes cd-a11y_anim {
    0%{
        opacity: 0;
        transform: translateY(50px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}


/* ------------------------------------------------ */

.cd-a11y--color-greyscale body > *{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.cd-a11y--color-high-contrast body > *{
    filter: contrast(120%);
    -webkit-filter: contrast(120%);
    -moz-filter: contrast(120%);
    -ms-filter: contrast(120%);
    -o-filter: contrast(120%);
}

.cd-a11y--color-light-contrast body > *{
    filter: contrast(80%);
    -webkit-filter: contrast(80%);
    -moz-filter: contrast(80%);
    -ms-filter: contrast(80%);
    -o-filter: contrast(80%);
}

.cd-a11y--color-high-brightness body > *{
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
    -moz-filter: brightness(120%);
    -ms-filter: brightness(120%);
    -o-filter: brightness(120%);
}

.cd-a11y--color-light-brightness body > *{
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
    -moz-filter: brightness(80%);
    -ms-filter: brightness(80%);
    -o-filter: brightness(80%);
}


.cd-a11y--color-high-contrast body > *{
    filter: contrast(135%);
    -webkit-filter: contrast(135%);
    -moz-filter: contrast(135%);
    -o-filter: contrast(135%);
}
.cd-a11y--color-high-saturation body > *{
    filter: saturate(200%);
    -webkit-filter: saturate(200%);
    -moz-filter: saturate(200%);
    -o-filter: saturate(200%);
}
.cd-a11y--color-low-saturation body > *{
    filter: saturate(50%);
    -webkit-filter: saturate(50%);
    -moz-filter: saturate(50%);
    -o-filter: saturate(50%);
}