$fhi-drawer-width-md: $fhi-core-px * 400;
$fhi-drawer-animation-speed: 0.3s;

.fhi-drawer {
    left: 0;
    position: relative;
    top: 0;
    z-index: 1;

    &__trigger {
        border: 0;

        margin: $fhi-core-space-1;
        padding: 0;
        position: relative;
        text-decoration: none;
        width: $fhi-core-px * 44;
        z-index: 1;

        &:focus,
        &:hover {
            background-color: transparent;
            text-decoration: none;
        }

        p {
            margin-bottom: 0;
            padding-bottom: $fhi-core-space-3;
            position: relative;
        }

        [class*="icon-"] {
            margin-right: $fhi-core-space-1;
        }
    }

    &__content {
        left: ($fhi-core-container-padding-xs * -1);
        margin-bottom: $fhi-core-space-2;
        margin-left: -100%;
        max-width: 100%;
        overflow-y: auto;
        padding-left: $fhi-core-px * 50;
        position: absolute;
        transition:
            margin-left $fhi-drawer-animation-speed,
            max-height $fhi-drawer-animation-speed;
        transition-timing-function: ease-in-out;
        width: 100%;

        .open & {
            left: 0;
            margin-left: 0;
        }

        // remove scrollbars (because of transition)
        scrollbar-color: transparent transparent;
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        &::-webkit-scrollbar-thumb {
            background: transparent;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
    }
}

@include media-breakpoint-up(md) {
    .fhi-drawer {
        min-height: 7rem;

        &__content {
            left: -16px; //make sure scrollbar is hidden when closed
            margin-left: ($fhi-drawer-width-md * -1);
            max-height: 0;
            max-width: $fhi-drawer-width-md;
            position: relative;
            width: auto;

            .open & {
                left: 0;
                max-height: 2000px;
            }
        }
    }
}