@charset "UTF-8";

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

File#: _1_responsive-sidebar
Title: Responsive Sidebar
Descr: Responsive sidebar container
Usage: codyhouse.co/license

-------------------------------- */
/* mobile version only (--default) 👇 */
.sidebar:not(.sidebar--static) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-fixed-element, 10);
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s 0.3s
}

.sidebar:not(.sidebar--static)::after {
    /* overlay layer */
    content: "";
    position: absolute;
    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-color 0.3s;
    z-index: 1
}

.sidebar:not(.sidebar--static) .sidebar__panel {
    /* content */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-bg);
    transform: translateX(-100%);
    transition: box-shadow 0.3s, transform 0.3s
}

.sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
    left: auto;
    right: 0;
    transform: translateX(100%)
}

.sidebar:not(.sidebar--static).sidebar--is-visible {
    visibility: visible;
    transition: none
}

.sidebar:not(.sidebar--static).sidebar--is-visible::after {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.85)
}

.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
    transform: translateX(0);
    box-shadow: var(--shadow-md)
}

/* end mobile version */
.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0
}

.sidebar__close-btn {
    --size: 32px;
    width: var(--size);
    height: var(--size);
    display: flex;
    border-radius: 50%;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: 0.2s;
    flex-shrink: 0
}

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

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

/* desktop version only (--static) 👇 */
.sidebar--static {
    flex-shrink: 0;
    flex-grow: 1
}

.sidebar--static .sidebar__header {
    display: none
}

.sidebar--sticky-on-desktop {
    position: sticky;
    top: var(--space-sm);
    max-height: calc(100vh - var(--space-sm));
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

/* end desktop version */
.sidebar,
.sidebar-loaded\:show {
    opacity: 0
        /* hide sidebar - or other elements using the .sidebar-loaded:show class - while it is initialized in JS */
}

.sidebar--loaded {
    opacity: 1
}

/* detect when the sidebar needs to switch from the mobile layout to a static one - used in JS */
[class*=sidebar--static]::before {
    display: none
}

.sidebar--static::before {
    content: "static"
}

.sidebar--static\@xs::before {
    content: "mobile"
}

@media (min-width: 32rem) {
    .sidebar--static\@xs::before {
        content: "static"
    }
}

.sidebar--static\@sm::before {
    content: "mobile"
}

@media (min-width: 48rem) {
    .sidebar--static\@sm::before {
        content: "static"
    }
}

.sidebar--static\@md::before {
    content: "mobile"
}

@media (min-width: 64rem) {
    .sidebar--static\@md::before {
        content: "static"
    }
}

.sidebar--static\@lg::before {
    content: "mobile"
}

@media (min-width: 80rem) {
    .sidebar--static\@lg::before {
        content: "static"
    }
}

.sidebar--static\@xl::before {
    content: "mobile"
}

@media (min-width: 90rem) {
    .sidebar--static\@xl::before {
        content: "static"
    }
}

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

File#: _1_expandable-side-navigation
Title: Expandable Side Navigation
Descr: A side navigation with expandable sub-lists and popular links
Usage: codyhouse.co/license

-------------------------------- */
.exsidenav__pop-nav {
    /*margin-bottom: var(--space-md)*/
}

.exsidenav__pop-link,
.exsidenav__link,
.exsidenav__control {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-contrast-high);
    text-decoration: none;
    line-height: 1;
    padding: var(--space-xxs);
    cursor: pointer;
    transition: 0.2s
}

.exsidenav__pop-link:hover,
.exsidenav__link:hover,
.exsidenav__control:hover {
    color: var(--color-primary)
}

/* popular links */
.exsidenav__pop-link .icon {
    --size: 16px;
    margin-right: var(--space-xxs);
    opacity: 0.5;
    transition: opacity 0.2s
}

.exsidenav__pop-link:hover .icon {
    opacity: 1
}

.exsidenav__pop-link[aria-current=page] {
    color: var(--color-primary);
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15);
    border-radius: var(--radius-md)
}

.exsidenav__pop-link[aria-current=page] .icon {
    opacity: 1
}

/* main links */
.exsidenav__link {
    position: relative
}

.exsidenav__list .exsidenav__list .exsidenav__link::before {
    /* left mark */
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 1px
}

.exsidenav__link[aria-current=page] {
    color: var(--color-primary)
}

.exsidenav__link[aria-current=page]::before {
    background-color: var(--color-primary)
}

/* list label */
.exsidenav__label-wrapper {
    margin: var(--space-md) 0 var(--space-xxs) var(--space-xxs)
}

.exsidenav__list .exsidenav__list .exsidenav__label-wrapper {
    margin: var(--space-xs) 0 var(--space-3xs) var(--space-xxs)
}

.exsidenav__label {
    color: var(--color-contrast-low);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em
}

/* button controlling sub navigations */
.exsidenav__control {
    font-weight: 600
}

.exsidenav__control .icon {
    --size: 16px;
    display: block;
    margin-left: auto
}

.exsidenav__control .icon__group {
    will-change: transform;
    transform-origin: 8px 8px;
    transition: transform 0.3s var(--ease-out)
}

.exsidenav__control .icon__group>* {
    transform-origin: 8px 8px;
    stroke-dasharray: 17;
    transform: translateY(3px);
    transition: transform 0.3s, stroke-dashoffset 0.3s;
    transition-timing-function: var(--ease-out)
}

.exsidenav__control .icon__group>*:first-child {
    stroke-dashoffset: 10
}

.exsidenav__control .icon__group>*:last-child {
    stroke-dashoffset: 10
}

.exsidenav__control[aria-expanded=true]+.exsidenav__list {
    display: block
        /* show the subnavigation */
}

.exsidenav__control[aria-expanded=true]+.exsidenav__list>* {
    animation: exsidenav-entry-animation 0.4s var(--ease-out)
        /* animate list items */
}

.exsidenav__control[aria-expanded=true] .icon__group {
    transform: rotate(-90deg)
}

.exsidenav__control[aria-expanded=true] .icon__group>*:first-child,
.exsidenav__control[aria-expanded=true] .icon__group *:last-child {
    stroke-dashoffset: 0;
    transform: translateY(0px)
}

.exsidenav__list .exsidenav__list {
    display: none;
    border-left: 1px solid var(--color-contrast-lower);
    margin: var(--space-4xs) 0 0 var(--space-xxs)
}

@keyframes exsidenav-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0px)
    }
}

@media (min-width: 64rem) {

    .exsidenav__pop-link,
    .exsidenav__link,
    .exsidenav__control {
        font-size: var(--text-sm)
    }
}

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

File#: _2_side-navigation-v3
Title: Side Navigation v3
Descr: A primary navigation located in the sidebar
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --side-template-mobile-header-height: 50px
}

@media not all and (min-width: 64rem) {
    .side-template-v3 .sidebar {
        --space-unit: 1.2rem;
        --text-unit: 1.2rem;
        font-size: var(--text-unit)
    }
}

/* mobile header - hidden on bigger screens */
.side-template-v3__mobile-header {
    background: var(--color-bg-light);
    height: var(--side-template-mobile-header-height);
    box-shadow: var(--shadow-xs), var(--shadow-sm);
    position: relative;
    z-index: var(--z-index-header)
}

.side-template-v3__logo {
    display: block;
    width: 104px;
    flex-shrink: 0;
    text-decoration: none
}

.side-template-v3__logo svg,
.side-template-v3__logo img {
    display: block;
    width: inherit
}

/* main */
.side-template-v3__main {
    /*background-color: var(--color-bg)*/
}

@media (min-width: 64rem) {
    .side-template-v3 {
        /*
        background: linear-gradient(to right, hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0.3) 50%, var(--color-bg) 50%)
        */
    }

    .side-template-v3__mobile-header {
        display: none
    }

    .side-template-v3__main {
        min-height: calc(100vh + -77px);
    }
}