$fresk-usermenu-panel-bg: $backgrounddrawerscolor;
$fresk-usermenu-text: $letterdrawerscolor;
$fresk-usermenu-muted: mix($letterdrawerscolor, $fresk-usermenu-panel-bg, 62%);
$fresk-usermenu-border: mix($letterdrawerscolor, $fresk-usermenu-panel-bg, 14%);
$fresk-usermenu-separator: mix($letterdrawerscolor, $fresk-usermenu-panel-bg, 8%);
$fresk-usermenu-hover-bg: mix($primary, $fresk-usermenu-panel-bg, 7%);
$fresk-usermenu-track-bg: mix($letterdrawerscolor, $fresk-usermenu-panel-bg, 12%);

$fresk-usermenu-panel-w: 340px;
$fresk-usermenu-panel-radius: 12px;
$fresk-usermenu-pad-x: 16px;
$fresk-usermenu-pad-y: 14px;
$fresk-usermenu-gutter: 12px;
$fresk-usermenu-font-size: 14px;
$fresk-usermenu-transition: 120ms;

$fresk-usermenu-toggle-avatar: 36px;
$fresk-usermenu-toggle-gap: 4px;
$fresk-usermenu-header-avatar: 44px;

$fresk-usermenu-shortcut-size: 42px;
$fresk-usermenu-shortcut-radius: 10px;
$fresk-usermenu-shortcut-glyph: 20px;
$fresk-usermenu-shortcut-gap: 6px;

$fresk-usermenu-tab-font-size: 14px;
$fresk-usermenu-tab-min-h: 48px;
$fresk-usermenu-tab-pad-y: 14px;
$fresk-usermenu-tab-indicator: 2px;
$fresk-usermenu-content-max-h: 60vh;

$fresk-usermenu-item-pad-y: 9px;
$fresk-usermenu-progress-h: 6px;
$fresk-usermenu-progress-radius: 999px;

body.theme-fresk .navbar.fixed-top #usernavigation .usermenu-container {
    .fresk-usermenu-dropdown-wrapper {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .fresk-usermenu-toggle {
        display: flex;
        align-items: center;
        gap: $fresk-usermenu-toggle-gap;
        height: 100%;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent !important;
        box-shadow: none !important;
        line-height: 1;

        &:hover,
        &:focus,
        &:active,
        &.show {
            color: $lettermenucolor !important;
            border-color: transparent !important;
        }

        &::after {
            flex: 0 0 auto;
            margin: 0;
            color: $lettermenucolor;
            vertical-align: middle;
        }
    }

    .fresk-usermenu-toggle-avatar {
        display: block;
        flex: 0 0 auto;
        width: $fresk-usermenu-toggle-avatar;
        height: $fresk-usermenu-toggle-avatar;

        img {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            border-radius: 50%;
            object-fit: cover;
            transition: box-shadow $fresk-usermenu-transition ease;
        }
    }

    .fresk-usermenu-toggle:hover .fresk-usermenu-toggle-avatar img,
    .fresk-usermenu-toggle:focus-visible .fresk-usermenu-toggle-avatar img,
    .fresk-usermenu-toggle.show .fresk-usermenu-toggle-avatar img {
        box-shadow: 0 0 0 2px rgba($lettermenucolor, 0.5);
    }
}

.fresk-usermenu-dropdown {
    width: $fresk-usermenu-panel-w;
    max-width: calc(100vw - 1.5rem);
    padding: 0;
    overflow: hidden;
    border: $border-width solid $fresk-usermenu-border;
    border-radius: $fresk-usermenu-panel-radius;
    background-color: $fresk-usermenu-panel-bg;
    box-shadow: $shadow-2;
    color: $fresk-usermenu-text;
    font-size: $fresk-usermenu-font-size;

    .fresk-usermenu-header {
        display: flex;
        flex-direction: column;
        gap: $fresk-usermenu-gutter;
        padding: $fresk-usermenu-pad-y $fresk-usermenu-pad-x;
        border-bottom: $border-width solid $fresk-usermenu-separator;
    }

    .fresk-usermenu-header-identity {
        display: flex;
        align-items: center;
        gap: $fresk-usermenu-gutter;
        min-width: 0;
    }

    .fresk-usermenu-header-avatar {
        display: block;
        flex: 0 0 auto;
        width: $fresk-usermenu-header-avatar;
        height: $fresk-usermenu-header-avatar;

        img {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .fresk-usermenu-header-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: $fresk-usermenu-text;
    }

    .fresk-usermenu-shortcuts {
        display: flex;
        flex-wrap: wrap;
        gap: $fresk-usermenu-shortcut-gap;
    }

    .fresk-usermenu-shortcut {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: $fresk-usermenu-shortcut-size;
        height: $fresk-usermenu-shortcut-size;
        border-radius: $fresk-usermenu-shortcut-radius;
        background-color: $iconfillermenucolor;
        color: $iconmenucolor;
        text-decoration: none;
        transition: background-color $fresk-usermenu-transition ease,
            color $fresk-usermenu-transition ease;

        .icon {
            margin: 0;
            color: $iconmenucolor !important;
        }

        .icon.material-icons {
            font-size: $fresk-usermenu-shortcut-glyph !important;
            width: auto;
            height: auto;
        }

        &:hover,
        &:focus {
            background-color: $iconfillermenucolorhover !important;
            color: $iconmenucolorhover;

            .icon {
                color: $iconmenucolorhover !important;
            }
        }

        &:active,
        &.active,
        &[aria-current='page'] {
            background-color: $iconfillermenucoloractive !important;
            color: $iconmenucoloractive;

            .icon {
                color: $iconmenucoloractive !important;
            }
        }
    }

    .fresk-usermenu-tabs {
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        border-bottom: $border-width solid $fresk-usermenu-separator;

        .nav-item {
            display: flex;
            flex: 1 1 0;
            min-width: 0;
        }

        .nav-link {
            position: relative;
            display: flex;
            flex: 1 1 auto;
            align-items: center;
            justify-content: center;
            min-height: $fresk-usermenu-tab-min-h;
            margin: 0;
            padding: $fresk-usermenu-tab-pad-y $fresk-usermenu-pad-x;
            border: 0;
            border-radius: 0;
            background-color: transparent;
            color: $fresk-usermenu-muted;
            font-size: $fresk-usermenu-tab-font-size;
            font-weight: 600;
            line-height: 1.2;
            text-align: center;
            transition: color $fresk-usermenu-transition ease;

            &:hover,
            &:focus {
                border: 0;
                color: $fresk-usermenu-text;
            }

            &.active {
                background-color: transparent;
                color: $primary;

                &::after {
                    content: '';
                    position: absolute;
                    inset-inline: 0;
                    bottom: -$border-width;
                    height: $fresk-usermenu-tab-indicator;
                    border-radius: $fresk-usermenu-tab-indicator $fresk-usermenu-tab-indicator 0 0;
                    background-color: $primary;
                }
            }
        }
    }

    .fresk-usermenu-tabcontent {
        max-height: $fresk-usermenu-content-max-h;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .dropdown-item {
        padding: $fresk-usermenu-item-pad-y $fresk-usermenu-pad-x;
        color: $fresk-usermenu-text;
        font-size: $fresk-usermenu-font-size;
        line-height: 1.35;
        white-space: normal;
        transition: background-color $fresk-usermenu-transition ease,
            color $fresk-usermenu-transition ease;

        &:hover,
        &:focus {
            background-color: $fresk-usermenu-hover-bg;
            color: $primary;
        }

        &:active {
            background-color: $fresk-usermenu-hover-bg;
            color: $primary;
        }
    }

    .dropdown-divider {
        margin: 8px 0;
        border-top-color: $fresk-usermenu-separator;
    }

    .fresk-usermenu-menu-items {
        margin: 0;
        padding: 8px 0;
        list-style: none;
    }

    .fresk-usermenu-menu-item-language {
        padding: 8px 0 4px;
    }

    .fresk-usermenu-menu-item-label {
        display: block;
        padding: 0 $fresk-usermenu-pad-x 4px;
        color: $fresk-usermenu-muted;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .fresk-usermenu-language-submenu {
        margin: 0;
        padding-inline-start: $fresk-usermenu-gutter;
        list-style: none;
    }

    .fresk-usermenu-courses {
        padding: 6px 0;
    }

    .fresk-usermenu-courses-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .fresk-usermenu-course-item + .fresk-usermenu-course-item {
        border-top: $border-width solid $fresk-usermenu-separator;
    }

    .fresk-usermenu-course-link {
        display: block;
        padding: 10px $fresk-usermenu-pad-x;
    }

    .fresk-usermenu-course-name {
        display: -webkit-box;
        overflow: hidden;
        font-weight: 500;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .fresk-usermenu-course-progress {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }

    .fresk-usermenu-course-progress .progress {
        flex: 1 1 auto;
        height: $fresk-usermenu-progress-h;
        border-radius: $fresk-usermenu-progress-radius;
        background-color: $fresk-usermenu-track-bg;
    }

    .fresk-usermenu-course-progress .progress-bar {
        border-radius: $fresk-usermenu-progress-radius;
        background-color: $primary;
    }

    .fresk-usermenu-course-percentage {
        flex: 0 0 auto;
        min-width: 34px;
        color: $fresk-usermenu-muted;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    .fresk-usermenu-courses-loading,
    .fresk-usermenu-courses-empty,
    .fresk-usermenu-courses-error {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 24px $fresk-usermenu-pad-x;
        color: $fresk-usermenu-muted;
        font-size: 13px;
        text-align: center;
    }

    .fresk-usermenu-courses-loading .icon {
        margin: 0;
        color: $fresk-usermenu-muted;
    }
}

@include media-breakpoint-down(sm) {
    .fresk-usermenu-dropdown {
        width: calc(100vw - 1.5rem);
    }
}