/*
Navigation offcanvas
==============================================
Custom styling for navigation offcanvas which replaces main navigation on smaller screens.
Based on custom offcanvas component.
*/

.navigation-offcanvas {
    --bs-offcanvas-padding-x: 0;
    --bs-offcanvas-padding-y: 0;
    overflow-x: hidden;
}

.navigation-offcanvas-container {
    position: relative;
}

.navigation-offcanvas-overlay {
    &.has-transition {
        transition: left 0.5s ease-in;
    }
}

.navigation-offcanvas-placeholder,
.navigation-offcanvas-overlay {
    width: 100%;
    background-color: $white;
    position: absolute;
    top: 0;
    left: 0;
}

.navigation-offcanvas-actions {
    .top-bar-nav-item {
        padding: 0 $spacer;
    }

    .top-bar-nav-name {
        display: inline;
    }
}

.navigation-offcanvas-headline {
    padding: 20px $spacer-md $spacer-md;
}

.navigation-offcanvas-link-icon {
    display: inline-flex;

    .loader {
        @extend .icon-sm;
    }
}

.navigation-offcanvas-link {
    @include transition(color 0.45s cubic-bezier(0.3, 0, 0.15, 1));
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 12px $spacer-md;

    &.is-home-link,
    &.is-back-link {
        justify-content: flex-start;

        .navigation-offcanvas-link-icon {
            margin-right: $spacer-sm;
        }
    }
}
