:root {
     --base-font-size: 16;
    /* COLORS */
     --green-400: #669588;
     --green-750: #28463d;
     --green-900: #001f16;
     --green-1000: #00231b;
     --spirit-600: #fdb714;
     --vims-orange-600: #eb7d28;
    /* FONTS */
     --font-stack-serif: 'adelle';
     --font-stack-sans-serif: 'adelle-sans';
     --font-size-10-2: 0.6375rem;
     --font-size-12: 0.75rem;
     --font-size-12-2: 0.765rem;
     --font-size-14: 0.875rem;
     --font-size-14-3: 0.8925rem;
     --font-size-16-3: 1.02rem;
     --font-size-22: 1.375rem;
     --font-line-height-18: 1.47;
     --font-line-height-20: 1.4;
     --font-line-height-26: 1.59;
    /* SPACING */
     --size-xxs: calc(6rem / var(--base-font-size));
     --size-xs: calc(11rem / var(--base-font-size));
     --size-s: calc(22rem / var(--base-font-size));
     --size-ms: calc(33rem / var(--base-font-size));
     --size-m: calc(44rem / var(--base-font-size));
     --size-corners-corner-base: 0.25rem;
    /* ANIMATION */
     --transition-speed: 0.2s;
}
/* COLOR CONTRAST ROW =========================================================================== */
 .colorContrastRow {
     background: var(--color-griffingreen-100);
     z-index: 2;
     button {
         font-family: var(--font-stack-sans-serif);
    }
     .wm-row__title, .wm-row__intro-text {
         color: white;
    }
}
 .ccr-container {
     padding: var(--size-m) var(--size-s);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: stretch;
     gap: 0;
     align-self: stretch;
     border-radius: var(--size-s);
     box-shadow: 0 var(--size-xs) var(--size-m) 0 rgba(0, 31, 22, 0.5);
     font-family: var(--font-stack-sans-serif);
     color: var(--color-wmgreen-300);
     position: relative;
     background: linear-gradient(0deg, rgba(40, 70, 61, 0), rgba(40, 70, 61, 0.2)) padding-box, linear-gradient(#00231b, #00231b) padding-box, linear-gradient(180deg, rgba(102, 149, 136, 0.5), rgba(40, 70, 61, 0.5)) border-box;
     border: 1px solid transparent;
}
 .ccr-container:has(.-recommended) {
     background: radial-gradient(100% 100% at 100% 0%, rgba(120, 157, 74, 0.15), rgba(120, 157, 74, 0)) padding-box, linear-gradient(0deg, rgba(40, 70, 61, 0), rgba(40, 70, 61, 0.2)) padding-box, linear-gradient(#00231b, #00231b) padding-box, linear-gradient(180deg, rgba(102, 149, 136, 0.5), rgba(40, 70, 61, 0.5)) border-box, radial-gradient(100% 100% at 100% 0%, #789d4a, rgba(120, 157, 74, 0)) border-box;
}
 .ccr-container:has(.-limited-use) {
     background: radial-gradient(100% 100% at 100% 0%, rgba(120, 157, 74, 0.15), rgba(120, 157, 74, 0)) padding-box, linear-gradient(0deg, rgba(40, 70, 61, 0), rgba(40, 70, 61, 0.2)) padding-box, linear-gradient(#00231b, #00231b) padding-box, linear-gradient(180deg, rgba(102, 149, 136, 0.5), rgba(40, 70, 61, 0.5)) border-box, radial-gradient(126.97% 100% at 100% 0%, rgba(253, 183, 20, 0.9), rgba(253, 183, 20, 0)) border-box;
}
 .ccr-container:has(.-not-recommended) {
     background: radial-gradient(100% 100% at 100% 0%, rgba(120, 157, 74, 0.15), rgba(120, 157, 74, 0)) padding-box, linear-gradient(0deg, rgba(40, 70, 61, 0), rgba(40, 70, 61, 0.2)) padding-box, linear-gradient(#00231b, #00231b) padding-box, linear-gradient(180deg, rgba(102, 149, 136, 0.5), rgba(40, 70, 61, 0.5)) border-box, radial-gradient(100% 100% at 100% 0%, #eb7d28, rgba(235, 125, 40, 0)) border-box;
}
 .ccr-container:has(.-do-not-use) {
     background: radial-gradient(100% 100% at 100% 0%, rgba(120, 157, 74, 0.15), rgba(120, 157, 74, 0)) padding-box, linear-gradient(0deg, rgba(40, 70, 61, 0), rgba(40, 70, 61, 0.2)) padding-box, linear-gradient(#00231b, #00231b) padding-box, linear-gradient(180deg, rgba(102, 149, 136, 0.5), rgba(40, 70, 61, 0.5)) border-box, radial-gradient(100% 100% at 100% 0%, #d81a1a, rgba(163, 45, 45, 0)) border-box;
}
 @media (min-width: calc(768rem / 16)) {
     .ccr-container {
         padding: var(--size-m);
    }
}
 @media (min-width: calc(1201rem / 16)) {
     .ccr-container {
         flex-direction: row;
         align-items: stretch;
    }
}
/* ROW INPUTS =================================================================================== */
 .row-inputs {
     container-type: inline-size;
     container-name: inputs;
     display: flex;
     flex-wrap: wrap;
     gap: var(--size-s);
     justify-content: center;
     align-items: center;
     flex: 1;
     z-index: 1;
}
 .field {
     text-align: left;
     flex: 1 0 100%;
}
 @media (min-width: calc(768rem / 16)) {
     .row-inputs {
         display: flex;
         flex-wrap: wrap;
         gap: var(--size-s);
         justify-content: center;
         align-items: center;
    }
     .field {
         flex: 1 1 48%;
    }
     .field + .field {
         margin-top: 0;
    }
}
 @media (width > calc(1201rem / 16)) {
     .row-inputs {
         flex: 0 1 23%;
         min-width: calc(230rem / var(--base-font-size));
         max-width: calc(300rem / var(--base-font-size));
    }
}
 .field label {
     font-size: var(--font-size-12);
     font-style: normal;
     font-weight: 400;
     line-height: 1.625;
     letter-spacing: 0.125rem;
     text-transform: uppercase;
}
/* SUBMIT BUTTON */
 button.check-btn {
     display: flex;
     padding: var(--size-s);
     justify-content: center;
     align-items: center;
     gap: 0.625rem;
     justify-self: center;
     min-width: max-content;
     max-width: 100%;
     width: 100%;
     border: 1px solid var(--color-wmgreen-600);
     border-radius: 0.5rem;
     background: var(--color-wmgreen-600);
     color: white;
     margin: 0;
     margin-top: var(--size-xs);
     text-align: center;
     font-size: var(--font-size-14);
     font-weight: 500;
     line-height: 1.21;
     letter-spacing: 0.09375rem;
     text-transform: uppercase;
     transition: all var(--transition-speed);
     cursor: default;
     &[disabled='false']:hover, &[disabled='false']:focus, &:not([disabled]):hover, &:not([disabled]):focus {
         cursor: pointer;
         border-radius: 0.5rem;
         border-color: var(--color-wmgreen-300);
         background: var(--color-wmgreen-600);
    }
     &[disabled='false']:active, &:not([disabled]):active, &:active {
         border-color: var(--color-wmgreen-300);
         background: var(--color-wmgreen-800);
         color: white;
    }
     &[disabled] {
         cursor: default;
         background: var(--green-900);
         border-color: var(--green-900);
         color: var(--color-wmgreen-600);
    }
}
 @media (min-width: calc(768rem / 16)) {
     button.check-btn {
         margin-top: var(--size-xs);
         max-width: calc(350rem / var(--base-font-size));
    }
}
 .row-divider {
     width: 100%;
     height: 1px;
     background-color: #669588;
     opacity: 0.5;
     margin: var(--size-ms) 0;
     background: linear-gradient( 90deg, rgba(102, 149, 136, 0) 0%, var(--green-400) 15%, var(--green-400) 85%, rgba(102, 149, 136, 0) 100% );
}
 @media (min-width: calc(1201rem / 16)) {
     .row-divider {
         width: 1px;
         height: auto;
         margin: 0 var(--size-ms);
         background: linear-gradient( 0deg, rgba(102, 149, 136, 0) 0%, var(--green-400) 15%, var(--green-400) 85%, rgba(102, 149, 136, 0) 100% );
    }
}
/* OUTPUT */
 .row-output {
     text-align: left;
     position: relative;
}
 .-show-intro #step-two {
     display: none;
}
 #step-one {
     display: none;
}
 .-show-intro #step-one {
     display: flex;
}
 .output-feedback {
     width: 100%;
}
 @media (min-width: calc(768rem / 16)) {
     .-show-intro #step-one {
         display: flex;
         align-items: center;
         height: 100%;
    }
     .output-intro {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
         gap: var(--size-s);
    }
     .output-feedback {
         grid-template-columns: 1fr 1fr;
         grid-template-areas: 'previewContainer previewContainer' 'colorDetails recommendations';
    }
}
 @media (min-width: calc(930rem / 16)) {
     .row-output {
         flex: 2;
    }
     .output-feedback {
         display: grid;
         gap: var(--size-s);
         justify-content: flex-start;
         align-items: flex-start;
         grid-template-columns: 1fr 1fr;
         grid-template-areas: 'previewContainer recommendations' 'colorDetails recommendations';
         grid-template-rows: minmax(auto, max-content) 1fr;
    }
}
 @media (width > calc(1201rem / 16)) {
     .row-output {
         flex: 1;
    }
}
/* INTRO TEXT */
 .output-intro-title {
     color: #fff;
     font-family: var(--font-stack-serif);
     font-variant-numeric: lining-nums proportional-nums;
     font-size: var(--font-size-22);
     font-style: normal;
     line-height: var(--font-line-height-26);
     display: block;
     margin-top: var(--size-s);
}
 @media (min-width: calc(768rem / 16)) {
     .output-intro-title {
         margin-top: 0;
    }
}
 .output-intro-text {
     color: var(--color-wmgreen-300);
     font-size: var(--font-size-16-3);
     line-height: var(--font-line-height-26);
     margin-top: var(--size-xs);
     display: block;
}
 .output-intro-text em {
     color: white;
     font-style: normal;
}
/* PREVIEW */
 .preview-grades-container {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: var(--size-s);
     justify-content: space-between;
     align-items: stretch;
}
 @media (min-width: calc(768rem / 16)) {
     .preview-grades-container {
         flex-direction: row;
    }
}
 .output-preview {
     display: flex;
     height: 8.75rem;
     padding: var(--size-s);
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-radius: var(--size-s);
     border: 1px dashed var(--green-400);
     background: #00231b;
     grid-area: iconPreview;
     flex: 1 0 100%;
}
 .output-feedback:has(.-recommended) .output-preview, .output-feedback:has(.-limited-use) .output-preview, .output-feedback:has(.-do-not-use) .output-preview, .output-feedback:has(.-not-recommended) .output-preview {
     border: 2px solid rgba(255, 255, 255, 0.15);
}
 @media (min-width: calc(768rem / 16)) {
     .output-preview {
         flex: 1 0 48%;
    }
}
 @media (min-width: calc(930rem / 16)) {
     .output-preview {
         width: calc(210rem / var(--base-font-size));
         flex: 0;
    }
}
 .amp {
     display: flex;
     flex-direction: column;
     justify-content: center;
     flex: 1 0 0;
}
 .amp svg {
     fill: rgba(51, 113, 96, 0.75);
}
 .output-preview-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
}
 .output-preview-title, .output-preview-title h2 {
     color: var(--color-wmgreen-300);
     font-size: var(--font-size-12);
     font-weight: 400;
     line-height: var(--font-line-height-26);
     letter-spacing: 0.125rem;
     text-transform: uppercase;
     margin: 0;
     padding: 0;
}
 @media (min-width: calc(768rem / 16)) {
     .output-preview-title {
         margin-bottom: -11px;
         flex: 1 0 100%;
    }
}
 .section-title {
     color: var(--color-wmgreen-300);
     font-size: var(--font-size-12);
     font-weight: 400;
     line-height: var(--font-line-height-26);
     letter-spacing: 0.125rem;
     text-transform: uppercase;
     margin: 0;
     padding: 0;
}
 .output-preview.-result {
     border-radius: var(--size-s);
     border: 2px solid rgba(255, 255, 255, 0.15);
     background: var(--color-wmgreen-600);
}
/* GRADES */
 @media (min-width: calc(768rem / 16)) {
     .grade-list {
         flex: 1 0 48%;
         grid-area: gradeList;
    }
}
 .grades {
     display: flex;
     flex-direction: column;
     gap: var(--size-xs);
     margin: 0;
     padding: 0;
}
 .grade {
     display: flex;
     padding: var(--size-xxs) var(--size-xxs) var(--size-xxs) var(--size-xs);
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
     border-radius: 0.5rem;
     border: 1px solid var(--green-750);
     background: var(--green-1000);
}
 @media (min-width: calc(768rem / 16)) {
     .grades {
         gap: var(--size-xs);
    }
     .grade {
         flex: 1;
    }
}
 .grade-text {
     font-size: 0.75rem;
}
 .grade-text .tooltip-button {
     all: unset;
     color: var(--green-400);
     fill: var(--green-400);
     position: relative;
     top: 1px;
     left: 2px;
     display: inline-flex;
     width: 0.625rem;
     height: 0.625rem;
     justify-content: center;
     align-items: center;
     cursor: pointer;
}
 .grade .pass-text {
     padding: 0 var(--size-xs);
     border-radius: var(--size-corners-corner-base);
     background: var(--color-wmgreen-600);
     color: white;
     font-size: 0.625rem;
     line-height: 2.6;
     letter-spacing: 0.125rem;
     text-transform: uppercase;
     width: calc(52rem / var(--base-font-size));
     text-align: right;
}
 .grade[data-status='fail'] .pass-text {
     background: rgba(163, 45, 45, 0.75);
}
/* COLOR LIST */
 .color-list {
     margin-top: var(--size-s);
     text-align: left;
}
 .color-details {
     margin: 0;
     padding: 0;
}
 .color-detail {
     list-style: none;
}
 @media (min-width: calc(768rem / 16)) {
     .color-list {
         grid-area: colorDetails;
    }
     .color-list .section-title {
         flex: 1 0 100%;
    }
     .color-details {
         display: flex;
         gap: var(--size-s);
         width: 100%;
    }
     .color-detail {
         width: 100%;
    }
}
 @media (min-width: calc(930rem / 16)) {
     .color-list {
         flex: 1 0 49%;
         margin-top: 0;
    }
}
 .color-detail-box {
     display: inline-block;
     width: 1rem;
     align-self: stretch;
     aspect-ratio: 1/1;
     border-radius: var(--size-corners-corner-base);
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: #555;
}
 .color-detail-text {
     color: var(--color-wmgreen-300);
     font-size: var(--font-size-10-2);
     line-height: var(--font-line-height-26);
     letter-spacing: 0.125rem;
     text-transform: uppercase;
     margin-top: var(--size-xs);
}
 .color-detail-hex {
     color: #fff;
     font-size: var(--font-size-12-2);
     text-transform: uppercase;
     margin-top: var(--size-xs);
     padding: var(--size-xs);
     border-radius: var(--size-corners-corner-base);
     border: 1px solid var(--color-wmgreen-500);
     background: var(--green-1000);
     display: flex;
     gap: calc(8rem / var(--base-font-size));
     align-items: center;
     line-height: 1;
     position: relative;
     &:hover, &:focus {
         outline: 1px solid currentColor;
         cursor: pointer;
    }
     .tooltip-wrapper {
         position: absolute;
         width: 100%;
         z-index: 3;
         height: calc(30rem / var(--base-font-size));
         left: 0;
         top: 1px;
    }
     button.tooltip-button {
         width: 100%;
         background: transparent;
    }
     .tooltip {
         text-transform: none;
         min-width: min-content;
         width: max-content;
         max-width: max-content;
         transition: all 0.2s ease-in-out;
         transform: translateX(0%);
         margin: 0 auto;
         left: 0;
         right: 0;
    }
     .tooltip:after {
         left: calc(50% - 10px);
         top: 104%;
    }
     &:hover .tooltip {
         display: block;
         transition: all 0.2s ease-in-out;
    }
}
 .color-detail-name {
     color: var(--color-wmgreen-300);
     font-size: 0.625rem;
     line-height: normal;
     margin-top: var(--size-xxs);
}
/* RECOMMENDATIONS */
 .recommendations {
     margin-top: var(--size-m);
     text-align: left;
     position: relative;
     color: #fff;
     font-size: var(--font-size-14-3);
     line-height: var(--font-line-height-18);
     ul {
         list-style-position: outside;
         padding-left: 1.5rem;
        /* list-style: none;
         */
    }
}
 @media (min-width: calc(768rem / 16)) {
     .recommendations {
         grid-area: recommendations;
         margin-top: var(--size-ms);
         font-size: var(--font-size-12-2);
    }
}
 @media (min-width: calc(930rem / 16)) {
     .recommendations {
         margin-top: 0;
    }
}
 @media (min-width: calc(1201rem / 16)) {
     .recommendations {
         margin-left: var(--size-xs);
    }
}
 .recommendations-badge {
     display: flex;
     padding: 0.5rem 0.875rem 0.5rem var(--size-xs);
     flex-direction: row;
     align-items: center;
     gap: var(--size-xxs);
     position: absolute;
     right: 0;
     top: -0.75rem;
     border-radius: 1.5rem;
     color: #fff;
     font-size: 0.625rem;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     background-color: #00231b;
     box-shadow: 0px 0px var(--size-xs) rgba(120, 157, 74, 0.25), 0px 0px var(--size-xxs) var(--color-moss-60) inset;
     border: 1px solid rgb(from var(--color-moss-60) r g b / 0.7);
     &:before {
         content: '';
         width: calc(10rem / var(--base-font-size));
         height: calc(10rem / var(--base-font-size));
         display: inline-block;
         background-color: var(--color-moss-60);
         border-radius: 50%;
    }
}
 .-recommended .recommendations-badge {
     box-shadow: 0px 0px var(--size-xs) rgba(120, 157, 74, 0.25), 0px 0px var(--size-xxs) var(--color-moss-60) inset;
     border: 1px solid rgb(from #fff r g b / 0.5);
     &:before {
         background-color: var(--color-moss-60);
    }
}
 .-limited-use .recommendations-badge {
     border: 1px solid rgb(from #fff r g b / 0.5);
     box-shadow: 0px 0px var(--size-xs) rgba(253, 183, 20, 0.25), 0px 0px var(--size-xxs) var(--spirit-600) inset;
     &:before {
         background-color: var(--spirit-600);
    }
}
 .-not-recommended .recommendations-badge {
     box-shadow: 0px 0px var(--size-xs) rgba(235, 125, 40, 0.25), 0px 0px var(--size-xxs) var(--vims-orange-600) inset;
     border: 1px solid rgb(from #fff r g b / 0.5);
     &:before {
         background-color: var(--vims-orange-600);
    }
}
 .-do-not-use .recommendations-badge {
     box-shadow: 0px 0px var(--size-xs) #d81a1a, 0px 0px var(--size-xxs) #d81a1a inset;
     border: 1px solid rgb(from #fff r g b / 0.5);
     &:before {
         background-color: #d81a1a;
    }
}
 .recommendation-text {
     margin-top: var(--size-xs);
}
 .resources-title, .best-practices-title {
     margin-top: var(--size-s);
     padding-top: var(--size-s);
     border-top: 1px dashed var(--color-wmgreen-500);
}
 .resources-list, .best-practices-list {
     margin: 0;
     padding: 0;
     margin-top: var(--size-xs);
}
 .recommendations ul.resources-list {
     list-style: none;
     padding-left: 0;
}
 a.resources-link {
     display: flex;
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
     color: var(--color-wmgreen-100);
     font-size: var(--font-size-14-3);
     line-height: 2.16;
     text-decoration: none;
     width: 100%;
     font-weight: 400;
     transition: all 0.2s ease-in-out;
}
 @media (min-width: calc(768rem / 16)) {
     a.resources-link {
         font-size: var(--font-size-12);
    }
}
 .resources-text {
     text-decoration-color: transparent;
     text-decoration-line: underline;
     text-decoration-style: dotted;
     text-decoration-skip-ink: none;
     text-underline-offset: 14%;
     text-underline-position: from-font;
     transition: all 0.3s ease-out;
     text-decoration-thickness: 10%;
}
 a.resources-link:hover .resources-text {
     text-decoration-color: white;
     color: white;
}
 .resources-icon {
     color: var(--color-wmgreen-500);
     font-weight: 600;
     font-size: calc(12rem / var(--base-font-size));
     transition: all 0.3s ease-out;
}
 a.resources-link:hover .resources-icon {
     text-decoration: none;
     color: white;
}
/* TOOLTIPS ===================================================================================== */
 .tooltip-wrapper {
     position: relative;
     &:hover .tooltip, &:focus-within .tooltip {
         display: block;
    }
     .grade-text & .tooltip {
         top: -59px;
         left: 50%;
    }
     .color-detail-hex & .tooltip {
         top: -48px;
    }
}
 .tooltip {
     display: none;
     box-sizing: border-box;
     font-size: calc(13rem / var(--base-font-size));
     position: absolute;
     background: var(--color-black-soft);
     border: 1px solid rgba(255, 255, 255, 0.15);
     min-width: calc(104rem / var(--base-font-size));
     max-width: calc(200rem / var(--base-font-size));
     margin-right: -340px;
     padding: calc(8rem / var(--base-font-size)) var(--size-xs);
     line-height: 1rem;
     text-align: center;
     z-index: 70;
     top: -25px;
     left: 100%;
     transform: translateX(-50%);
     color: white;
     border-radius: calc(6rem / var(--base-font-size));
     animation: fadeIn 0.25s;
}
 .tooltip:after {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid var(--color-black-soft);
     top: calc(100% + 1px);
     position: absolute;
     bottom: 0;
     height: 0;
     width: 0;
     left: calc(50% - 11px);
     content: '';
}
 @media screen and (min-width: calc(768rem / 16)) {
     .grade-text .tooltip-wrapper .tooltip {
         top: -46px;
         left: 90%;
    }
     .tooltip {
         left: 100%;
         max-width: calc(400rem / var(--base-font-size));
         top: -25px;
    }
}
 .tooltip-icon {
     color: var(--green-400);
     font-weight: 400;
     font-size: calc(12rem / var(--base-font-size));
}
/* fade in animation for tooltips */
 @keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fadeOut {
     0% {
         opacity: 1;
    }
     100% {
         opacity: 0;
    }
}
/* STYLED SELECT DROPDOWN =================================================== */
 .styled-select-container {
     position: relative;
     display: block;
     width: 100%;
     user-select: none;
}
 .field {
     min-height: calc(90rem / var(--base-font-size));
}
/* hidden to prevent seeing on load */
 select {
     opacity: 0;
     position: absolute;
     top: -9999px;
     left: -9999px;
}
/* The actual, visually hidden select */
 .styled-select-container select {
     display: none;
}
/* CSS for the styled select dropdown */
 button.styled-select-single {
     background-color: white;
     cursor: pointer;
     transition: all var(--transition-speed);
     position: relative;
     display: flex;
     padding: var(--size-s);
     justify-content: flex-start;
     align-items: center;
     align-self: stretch;
     border-radius: 0.5rem;
     border: 1px solid var(--color-wmgreen-500);
     background: var(--green-900);
     margin-top: var(--size-xxs);
     width: 100%;
     color: #fff;
     text-align: center;
     font-size: var(--font-size-16-3, 1.02rem);
     line-height: var(--font-line-height-26);
     gap: var(--size-xs);
     .color-box {
         .-show-intro & {
             background: transparent;
             &[style*='transparent'] {
                 border: 1px dashed var(--color-wmgreen-500);
            }
        }
    }
     .color-hex {
         display: none;
    }
}
 .styled-select-single:hover, .styled-select-single:focus-visible {
     border: 1px solid white;
     background: var(--green-900);
}
 .styled-select-single span[class*='chevron'] {
     color: var(--green-400);
     transition: all 0.1s ease-in-out;
}
 .styled-select-single:hover span[class*='chevron'], .styled-select-single:focus-within span[class*='chevron'] {
     color: white;
}
 .styled-select-single[aria-expanded='true'] span[class*='chevron'] {
     rotate: 180deg;
     color: white;
}
 .styled-select-container.active .styled-select-single {
     border-color: var(--accent-color);
     box-shadow: var(--focus-shadow);
}
 .styled-select-single-value {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: var(--size-xs);
     width: 100%;
}
 .styled-select-single-arrow {
     width: var(--font-size-xs);
     height: var(--font-size-xs);
     margin-left: var(--space-2xs);
     transition: transform var(--transition-speed);
     color: var(--green-400);
     text-align: center;
     font-size: var(--font-size-16-3);
     font-weight: 900;
     line-height: var(--font-line-height-26);
}
 .styled-select-container.active .styled-select-single-arrow {
     transform: rotate(180deg);
}
/* Dropdown */
 .styled-select-dropdown-container {
     position: absolute;
     top: calc(100% + 5px);
     left: 0;
     width: 100%;
     max-height: calc(300rem / var(--base-font-size));
     overflow-y: auto;
     background-color: white;
     z-index: 100;
     opacity: 0;
     transform: translateY(-10px);
     pointer-events: none;
     transition: all var(--transition-speed);
     display: flex;
     padding: var(--size-xs) var(--size-xs) 0 var(--size-xs);
     flex-direction: column;
     align-items: center;
     align-self: stretch;
     border-radius: 0.5rem;
     border: 1px solid var(--green-750);
     background: var(--green-900);
     box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.13), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.09), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.08), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.06), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.05), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.04);
}
 .styled-select-container.active .styled-select-dropdown-container {
     opacity: 1;
     transform: translateY(0);
     pointer-events: all;
}
 .styled-select-dropdown {
     width: 100%;
}
/* Search box */
 .styled-select-search {
     position: sticky;
     top: 0px;
     padding: var(--space-2xs);
     background-color: var(--background-color, #fff);
     border-bottom: 1px solid var(--border-color);
}
 .styled-select-search input {
     width: 100%;
     height: var(--font-size-2xl);
     padding: var(--space-2xs) var(--space-sm);
     border: none;
     outline: none;
     transition: all var(--transition-speed);
}
 .styled-select-search input:focus {
     border-color: var(--primary-color);
     box-shadow: var(--focus-shadow);
}
/* Options */
 .styled-select-results {
     list-style: none;
     margin: 0;
     padding: var(--space-2xs) 0;
     width: 100%;
}
 .styled-select-option {
     display: flex;
     padding: var(--size-xs);
     justify-content: flex-start;
     align-items: center;
     align-self: stretch;
     gap: var(--size-xs);
     border-radius: 0.5rem;
     width: 100%;
     color: #fff;
     text-align: center;
     font-size: var(--font-size-14-3);
     line-height: var(--font-line-height-20);
     cursor: pointer;
     transition: background-color var(--transition-speed);
}
 .styled-select-option:hover {
     background: rgb(from var(--color-griffingreen-100) r g b / 0.5);
     color: #1e1e1e;
     border-radius: var(--size-corners-corner-base);
}
 .styled-select-option:focus, .styled-select-option:focus-within {
     outline: var(--focus-outline);
     color: #373737;
     background: rgb(from var(--color-griffingreen-100) r g b / 0.5);
}
 .styled-select-option.selected, .styled-select-option.selected:hover {
     font-weight: 500;
     background: var(--color-griffingreen-100);
     cursor: default;
}
/* hide selected default option in dropdown */
 .styled-select-option#option-container-textColorSelect-, .styled-select-option#option-container-backgroundColorSelect- {
     opacity: 0;
     height: 1px;
     margin: 0;
     padding: 0;
}
/* if default happens to be selected, make it look like the button text */
 .styled-select-single-value .color-box[style='background-color:#'] {
     background: transparent;
     border: 1px dashed var(--color-wmgreen-500);
}
 .styled-select-group-header {
     padding: calc(10rem / var(--base-font-size)) calc(15rem / var(--base-font-size));
     font-weight: bold;
     background-color: var(--button-background-color);
     border-bottom: 1px solid var(--border-color);
     border-top: 1px solid var(--border-color);
}
 .color-box {
     display: inline-block;
     width: 1.625rem;
     min-width: 1.625rem;
     align-self: stretch;
     aspect-ratio: 1/1;
     border-radius: var(--size-corners-corner-base);
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: #555;
}
 .color-name {
     flex: 1 0 auto;
     text-align: left;
     color: #fff;
     position: relative;
     top: 2px;
     text-transform: none;
     letter-spacing: 0;
     font-weight: 400;
}
 .color-hex {
     color: var(--green-400);
     font-size: var(--font-size-12-2);
     line-height: 1;
     top: 3px;
     display: block;
     position: relative;
}
/* Multiple select */
 .styled-select-container.multiple .styled-select-single {
     padding: var(--space-xs) var(--space-md);
     flex-wrap: wrap;
     align-items: center;
}
 .styled-select-selected-items {
     display: flex;
     flex-wrap: wrap;
     gap: calc(5rem / var(--base-font-size));
}
 .styled-select-selected-item {
     display: flex;
     align-items: center;
     gap: calc(5rem / var(--base-font-size));
     padding: var(--space-3xs) var(--space-2xs);
     background-color: rgba(from var(--link-color) r g b / 0.1);
     border-radius: var(--border-radius);
}
 .styled-select-remove-item {
     cursor: pointer;
     line-height: 1;
     color: #777;
}
 .styled-select-remove-item:hover {
     color: var(--danger);
}
/* Placeholder */
 .styled-select-placeholder {
     color: #757575;
}
/* No results */
 .styled-select-no-results {
     padding: var(--space-xs) var(--space-md);
     color: #999;
     font-style: italic;
}
 .hidden {
     display: none;
}