@charset "UTF-8";

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

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */
.modal {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.modal:not(.modal--is-visible) {
    pointer-events: none;
    background-color: transparent
}

.modal--is-visible {
    opacity: 1;
    visibility: visible
}

/* close buttons */
.modal__close-btn {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    transition: 0.2s
}

.modal__close-btn .icon {
    display: block;
    margin: auto
}

.modal__close-btn--outer {
    /* close button - outside the modal__content */
    --size: 48px;
    width: var(--size);
    height: var(--size);
    position: fixed;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: var(--z-index-fixed-element, 10);
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
    transition: 0.2s
}

.modal__close-btn--outer .icon {
    color: var(--color-white);
    /* icon color */
    transition: transform 0.3s var(--ease-out-back)
}

.modal__close-btn--outer:hover {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 1)
}

.modal__close-btn--outer:hover .icon {
    transform: scale(1.1)
}

.modal__close-btn--inner {
    /* close button - inside the modal__content */
    --size: 32px;
    width: var(--size);
    height: var(--size);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: 0.2s
}

.modal__close-btn--inner .icon {
    color: inherit
        /* icon color */
}

.modal__close-btn--inner:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md)
}

/* animations */
:root {
    --modal-transition-duration: 0.2s
        /* fallback (i.e., unless specified differently in the variations 👇) */
}

@media (prefers-reduced-motion: no-preference) {
    .modal--animate-fade {
        --modal-transition-duration: 0.2s;
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-fade.modal--is-visible {
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s
    }

    .modal--animate-scale,
    .modal--animate-translate-up,
    .modal--animate-translate-down,
    .modal--animate-translate-right,
    .modal--animate-translate-left {
        --modal-transition-duration: 0.2s;
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-scale .modal__content,
    .modal--animate-translate-up .modal__content,
    .modal--animate-translate-down .modal__content,
    .modal--animate-translate-right .modal__content,
    .modal--animate-translate-left .modal__content {
        will-change: transform;
        transition: transform var(--modal-transition-duration) var(--ease-out)
    }

    .modal--animate-scale.modal--is-visible,
    .modal--animate-translate-up.modal--is-visible,
    .modal--animate-translate-down.modal--is-visible,
    .modal--animate-translate-right.modal--is-visible,
    .modal--animate-translate-left.modal--is-visible {
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s
    }

    .modal--animate-scale.modal--is-visible .modal__content,
    .modal--animate-translate-up.modal--is-visible .modal__content,
    .modal--animate-translate-down.modal--is-visible .modal__content,
    .modal--animate-translate-right.modal--is-visible .modal__content,
    .modal--animate-translate-left.modal--is-visible .modal__content {
        transform: scale(1)
            /* reset all transformations */
    }

    .modal--animate-slide-up,
    .modal--animate-slide-down,
    .modal--animate-slide-right,
    .modal--animate-slide-left {
        --modal-transition-duration: 0.3s;
        transition: opacity 0s var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-slide-up .modal__content,
    .modal--animate-slide-down .modal__content,
    .modal--animate-slide-right .modal__content,
    .modal--animate-slide-left .modal__content {
        will-change: transform;
        transition: transform var(--modal-transition-duration) var(--ease-out)
    }

    .modal--animate-slide-up.modal--is-visible,
    .modal--animate-slide-down.modal--is-visible,
    .modal--animate-slide-right.modal--is-visible,
    .modal--animate-slide-left.modal--is-visible {
        transition: background-color var(--modal-transition-duration), visibility 0s
    }

    .modal--animate-slide-up.modal--is-visible .modal__content,
    .modal--animate-slide-down.modal--is-visible .modal__content,
    .modal--animate-slide-right.modal--is-visible .modal__content,
    .modal--animate-slide-left.modal--is-visible .modal__content {
        transform: scale(1)
            /* reset all transformations */
    }

    /* scale */
    .modal--animate-scale .modal__content {
        transform: scale(0.95)
    }

    /* translate */
    .modal--animate-translate-up .modal__content {
        transform: translateY(40px)
    }

    .modal--animate-translate-down .modal__content {
        transform: translateY(-40px)
    }

    .modal--animate-translate-right .modal__content {
        transform: translateX(-40px)
    }

    .modal--animate-translate-left .modal__content {
        transform: translateX(40px)
    }

    /* slide */
    .modal--animate-slide-up .modal__content {
        transform: translateY(100%)
    }

    .modal--animate-slide-down .modal__content {
        transform: translateY(-100%)
    }

    .modal--animate-slide-right .modal__content {
        transform: translateX(-100%)
    }

    .modal--animate-slide-left .modal__content {
        transform: translateX(100%)
    }
}

/* load content - optional */
.modal--is-loading .modal__content {
    visibility: hidden
}

.modal--is-loading .modal__loader {
    display: flex
}

.modal__loader {
    /* loader icon */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: none;
    pointer-events: none
}

/* --image */
.modal-img-btn {
    position: relative;
    cursor: pointer
}

.modal-img-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
    transition: background 0.2s
}

.modal-img-btn:hover::after {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7)
}

.modal-img-btn:hover .modal-img-btn__icon-wrapper {
    opacity: 1
}

.modal-img-btn__icon-wrapper {
    position: absolute;
    z-index: 2;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7);
    opacity: 0;
    transition: opacity 0.2s
}

.modal-img-btn__icon-wrapper .icon {
    color: var(--color-white)
}

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

File#: _1_search-input
Title: Search input
Descr: Search input field with custom button
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --search-input-btn-width: 2.2em;
    --search-input-icon-size: 1em;
    --search-input-shortcut-margin: 0.325em
        /* gap between the shortcut badge and the input edges */
}

.search-input {
    position: relative
}

.search-input__input {
    width: 100%;
    height: 100%
}

.search-input__input::-webkit-search-decoration,
.search-input__input::-webkit-search-cancel-button,
.search-input__input::-webkit-search-results-button,
.search-input__input::-webkit-search-results-decoration {
    -webkit-appearance: none
}

.search-input__input::-ms-clear,
.search-input__input::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

.search-input--icon-right .search-input__input {
    padding-right: var(--search-input-btn-width)
}

.search-input--icon-left .search-input__input {
    padding-left: var(--search-input-btn-width)
}

.search-input__btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--search-input-btn-width)
}

.search-input__btn:active .icon {
    transform: translateY(2px)
}

.search-input__btn .icon {
    display: block;
    --size: var(--search-input-icon-size);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-contrast-low);
    /* icon color */
    transition: 0.2s
}

.search-input--icon-left .search-input__btn {
    left: 0;
    right: auto;
    pointer-events: none
}

.search-input__btn:focus .icon,
.search-input .search-input__input:focus+.search-input__btn .icon {
    color: var(--color-primary)
        /* active icon color */
}

/* --shortcut */
.search-input__shortcut {
    position: absolute;
    right: var(--search-input-shortcut-margin);
    top: var(--search-input-shortcut-margin);
    height: calc(100% - var(--search-input-shortcut-margin) * 2);
    display: flex;
    align-items: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-contrast-lower);
    border-radius: var(--radius-sm);
    --space-unit: 1em;
    padding: 0 var(--space-3xs);
    line-height: 1;
    color: var(--color-contrast-medium)
}

.search-input:focus-within .search-input__shortcut {
    display: none
}

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

File#: _1_radios-checkboxes
Title: Radios and Checkboxes
Descr: Custom radio and checkbox buttons
Usage: codyhouse.co/license

-------------------------------- */
:root {
    /* radios + checkboxes */
    --checkbox-radio-size: 18px;
    --checkbox-radio-gap: var(--space-xxs);
    /* gap between button and label */
    --checkbox-radio-border-width: 1px;
    --checkbox-radio-line-height: 1.4;
    /* radios */
    --radio-marker-size: 8px;
    /* checkboxes */
    --checkbox-marker-size: 12px;
    --checkbox-radius: 4px
}

/* hide native buttons */
.radio,
.checkbox {
    position: absolute;
    padding: 0;
    margin: 0;
    margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
    opacity: 0;
    height: var(--checkbox-radio-size);
    width: var(--checkbox-radio-size);
    pointer-events: none
}

/* label */
.radio+label,
.checkbox+label {
    display: inline-block;
    line-height: var(--checkbox-radio-line-height);
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap))
}

/* custom inputs - basic style */
.radio+label::before,
.checkbox+label::before {
    content: "";
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    top: -0.1em;
    margin-left: calc(-1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap)));
    flex-shrink: 0;
    width: var(--checkbox-radio-size);
    height: var(--checkbox-radio-size);
    background-color: var(--color-bg);
    border-width: var(--checkbox-radio-border-width);
    border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), 0.65);
    border-style: solid;
    box-shadow: var(--shadow-xs);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--checkbox-radio-gap);
    transition: transform 0.2s, border 0.2s
}

/* :hover */
.radio:not(:checked):not(:focus)+label:hover::before,
.checkbox:not(:checked):not(:focus)+label:hover::before {
    border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), 1)
}

/* radio only style */
.radio+label::before {
    border-radius: 50%
}

/* checkbox only style */
.checkbox+label::before {
    border-radius: var(--checkbox-radius)
}

/* :checked */
.radio:checked+label::before,
.checkbox:checked+label::before {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-xs);
    border-color: var(--color-primary);
    transition: transform 0.2s
}

/* :active */
.radio:active+label::before,
.checkbox:active+label::before {
    transform: scale(0.8);
    transition: transform 0.2s
}

/* :checked:active */
.radio:checked:active+label::before,
.checkbox:checked:active+label::before {
    transform: none;
    transition: none
}

/* radio button icon */
.radio:checked+label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--radio-marker-size)
}

/* checkbox button icon */
.checkbox:checked+label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-size: var(--checkbox-marker-size)
}

/* :focus */
.radio:checked:active+label::before,
.checkbox:checked:active+label::before,
.radio:focus+label::before,
.checkbox:focus+label::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

/* --radio--bg, --checkbox--bg -> variation with background color */
.radio--bg+label,
.checkbox--bg+label {
    padding: var(--space-4xs) var(--space-3xs);
    padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap) + var(--space-3xs));
    border-radius: var(--radius-md);
    transition: background 0.2s
}

.radio--bg+label:hover,
.checkbox--bg+label:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075)
}

.radio--bg:active+label,
.checkbox--bg:active+label,
.radio--bg:focus+label,
.checkbox--bg:focus+label {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1)
}

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

File#: _1_circle-loader
Title: Circle Loader
Descr: A collection of animated circle loaders
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --circle-loader-v1-size: 48px;
    --circle-loader-v1-stroke-width: 4px;
    --circle-loader-v2-size: 64px;
    --circle-loader-v2-stroke-width: 2;
    --circle-loader-v3-size: 64px;
    --circle-loader-v4-size: 48px;
    --circle-loader-v5-size: 64px;
    --circle-loader-v6-size: 48px
}

.circle-loader {
    position: relative;
    display: inline-block
}

@supports (animation-name: this) {
    .circle-loader__label {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%)
    }
}

@supports (animation-name: this) {
    .circle-loader--v1 {
        transform: rotate(45deg);
        will-change: transform;
        animation: circle-loader-1 0.75s infinite var(--ease-in-out)
    }

    .circle-loader--v1 .circle-loader__circle {
        width: var(--circle-loader-v1-size);
        height: var(--circle-loader-v1-size);
        border-width: var(--circle-loader-v1-stroke-width);
        border-style: solid;
        border-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
        border-radius: 50%
    }

    .circle-loader--v1 .circle-loader__circle::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-width: inherit;
        border-style: inherit;
        border-color: transparent;
        border-top-color: var(--color-primary);
        border-radius: inherit
    }
}

@keyframes circle-loader-1 {
    0% {
        transform: rotate(45deg)
    }

    100% {
        transform: rotate(405deg)
    }
}

@supports (animation-name: this) {
    .circle-loader--v2 {
        will-change: transform;
        animation: circle-loader-spinning-main 1.4s infinite linear
    }

    .circle-loader--v2 .circle-loader__svg {
        display: block;
        width: var(--circle-loader-v2-size);
        height: var(--circle-loader-v2-size);
        color: var(--color-primary)
    }

    .circle-loader--v2 .circle-loader__svg>* {
        stroke-width: var(--circle-loader-v2-stroke-width)
    }

    .circle-loader--v2 .circle-loader__base {
        opacity: 0.2
    }

    .circle-loader--v2 .circle-loader__fill {
        stroke-linecap: round;
        stroke-dashoffset: 0;
        stroke-dasharray: 90 120;
        transform-origin: 50% 50%;
        transform: rotate(45deg);
        animation: circle-loader-dash 1.4s infinite
    }
}

@keyframes circle-loader-dash {

    0%,
    20% {
        stroke-dashoffset: 0;
        transform: rotate(0)
    }

    50%,
    70% {
        stroke-dashoffset: 80;
        transform: rotate(270deg)
    }

    100% {
        stroke-dashoffset: 0;
        transform: rotate(360deg)
    }
}

@keyframes circle-loader-spinning-main {
    to {
        transform: rotate(360deg)
    }
}

@supports (animation-name: this) {
    .circle-loader--v3 {
        width: var(--circle-loader-v3-size);
        height: var(--circle-loader-v3-size)
    }

    .circle-loader--v3 .circle-loader__circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--color-primary);
        transform: scale(0);
        opacity: 0.8;
        will-change: transform, opacity;
        animation: circle-loader-3 1.2s infinite
    }

    .circle-loader--v3 .circle-loader__circle--2nd {
        animation-delay: 0.6s
    }
}

@keyframes circle-loader-3 {
    to {
        transform: scale(1);
        opacity: 0
    }
}

@supports (animation-name: this) {
    .circle-loader--v4 {
        width: var(--circle-loader-v4-size);
        height: var(--circle-loader-v4-size);
        border-radius: 50%;
        overflow: hidden
    }

    .circle-loader--v4 .circle-loader__mask,
    .circle-loader--v4 .circle-loader__circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit
    }

    .circle-loader--v4 .circle-loader__mask {
        -webkit-clip-path: circle(calc(0.5 * var(--circle-loader-v4-size)));
        clip-path: circle(calc(0.5 * var(--circle-loader-v4-size)))
    }

    .circle-loader--v4 .circle-loader__circle--1st {
        background-color: var(--color-contrast-low)
    }

    .circle-loader--v4 .circle-loader__circle--2nd {
        background-color: var(--color-primary);
        will-change: transform;
        transform-origin: 50% 100%;
        animation: circle-loader-4 1.2s infinite cubic-bezier(0.23, 0.9, 0.75, 0.1);
        transform: translateX(-100%)
    }
}

@keyframes circle-loader-4 {
    to {
        transform: translateX(100%)
    }
}

@supports (animation-name: this) {
    .circle-loader--v5 {
        font-size: var(--circle-loader-v5-size);
        width: 1em;
        height: 1em
    }

    .circle-loader--v5 .circle-loader__label {
        font-size: 1rem
    }

    .circle-loader--v5 .circle-loader__ball {
        position: absolute;
        top: 0;
        left: calc(50% - 0.140625em);
        width: 0.28125em;
        height: 0.28125em;
        background-color: var(--color-primary);
        border-radius: 50%;
        animation: circle-loader-5-ball 0.8s infinite
    }

    .circle-loader--v5 .circle-loader__shadow {
        position: absolute;
        bottom: 0;
        left: calc(50% - 0.15625em);
        width: 0.3125em;
        height: 0.3125em;
        background-color: var(--color-contrast-lower);
        border-radius: 50%;
        transform: scaleY(0.4) scaleX(1.2);
        animation: circle-loader-5-shadow 0.8s infinite
    }
}

@keyframes circle-loader-5-ball {
    0% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4)
    }

    50% {
        transform: translateY(0.5625em);
        animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95)
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes circle-loader-5-shadow {
    0% {
        transform: scaleY(0.4) scaleX(1.2);
        background-color: var(--color-contrast-lower);
        animation-timing-function: cubic-bezier(0.61, 0.12, 0.85, 0.4)
    }

    50% {
        transform: scaleY(0.2) scaleX(0.6);
        background-color: var(--color-contrast-low);
        animation-timing-function: cubic-bezier(0.12, 0.59, 0.46, 0.95)
    }

    100% {
        transform: scaleY(0.4) scaleX(1.2);
        background-color: var(--color-contrast-lower)
    }
}

@supports (animation-name: this) {
    .circle-loader--v6 .circle-loader__svg {
        display: block;
        width: var(--circle-loader-v6-size);
        height: var(--circle-loader-v6-size);
        color: var(--color-primary)
    }

    .circle-loader--v6 .circle-loader__fill {
        stroke-width: 8px;
        stroke-dashoffset: 35;
        stroke-dasharray: 36 36;
        animation: circle-loader-6 1.5s infinite
    }
}

@keyframes circle-loader-6 {

    0%,
    100% {
        stroke-dashoffset: 35
    }

    50% {
        stroke-dashoffset: -35
    }
}

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

File#: _2_autocomplete
Title: Autocomplete
Descr: Autocomplete plugin for input elements
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --autocomplete-dropdown-vertical-gap: 4px;
    /* gap between input and results list */
    --autocomplete-dropdown-max-height: 150px;
    --autocomplete-dropdown-scrollbar-width: 6px
        /* custom scrollbar width - webkit browsers */
}

.autocomplete__loader {
    /* loader visible while searching */
    /* CSS variables inherited from the circle-loader component */
    --circle-loader-v1-size: 1em;
    --circle-loader-v1-stroke-width: 2px
}

.autocomplete:not(.autocomplete--searching) .autocomplete__loader {
    /* .autocomplete--searching is used to show the loader element - added in JS */
    display: none
}

/* results dropdown  */
.autocomplete__results {
    position: absolute;
    z-index: var(--z-index-popover, 5);
    width: 100%;
    left: 0;
    top: calc(100% + var(--autocomplete-dropdown-vertical-gap));
    transform: translateY(4px);
    /* slide in animation */
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-md);
    border-radius: var(--radius-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s 0.3s, transform 0.3s var(--ease-in);
    overflow: hidden
}

.autocomplete--results-visible .autocomplete__results {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, transform 0.3s var(--ease-out);
    transform: translateY(0)
}

.autocomplete__list {
    max-height: var(--autocomplete-dropdown-max-height);
    overflow: auto;
    -webkit-overflow-scrolling: touch
        /* custom scrollbar */
}

.autocomplete__list::-webkit-scrollbar {
    /* scrollbar width */
    width: var(--autocomplete-dropdown-scrollbar-width)
}

.autocomplete__list::-webkit-scrollbar-track {
    /* progress bar */
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.08);
    border-radius: 0
}

.autocomplete__list::-webkit-scrollbar-thumb {
    /* handle */
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.12);
    border-radius: 0
}

.autocomplete__list::-webkit-scrollbar-thumb:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2)
}

/* single result item */
.autocomplete__item {
    cursor: pointer;
    transition: 0.2s
}

.autocomplete__item:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075)
}

.autocomplete__item:focus {
    outline: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15)
}

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

File#: _3_advanced-search
Title: Advanced Search
Descr: A modal window containing a search input with filtering options
Usage: codyhouse.co/license

-------------------------------- */
.adv-search {
    /* search input component */
    --search-input-btn-width: 46px;
    --search-input-icon-size: 20px
}

.adv-search__close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s
}

.adv-search__close-btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1)
}

.adv-search__close-btn .icon {
    display: block;
    --size: 20px
}

.adv-search__result-v1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-xxs);
    box-shadow: var(--inner-glow), var(--shadow-xs);
    color: var(--color-contrast-higher);
    text-decoration: none;
    font-size: var(--text-base);
    transition: 0.2s
}

.adv-search__result-v1:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-sm)
}

.adv-search__result-v2 {
    display: block;
    overflow: hidden;
    height: 100%;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    box-shadow: var(--inner-glow), var(--shadow-xs);
    color: var(--color-contrast-higher);
    text-decoration: none;
    transition: 0.2s
}

.adv-search__result-v2 footer p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.adv-search__result-v2:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-sm)
}