@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

$_cds-navigation-item-border-radius: var(--cds-navigation-item-br); // config.$config-global-border-radius !default;
$_cds-tooltip-border-radius: var(--cds-tooltip-tip-br);

.cds-navigation {
    display: flex;
    flex-direction: column;
    gap: vars.$cds-spacing-25;
    padding-inline: vars.$cds-spacing-100;
    transition: padding vars.$cds-transition-fast ease-in-out;
    list-style-type: none;

    &__divider {
        position: relative;
        display: flex;
        align-items: flex-end;
        text-wrap: nowrap;
        padding-inline: vars.$cds-spacing-50;
        padding-bottom: vars.$cds-spacing-75;
        height: vars.$cds-size-250;
        @include mixins.cds-paragraph-xs(bold);
        text-transform: uppercase;
        letter-spacing: 2;
        color: var(--cds-color-text-default);
    }

    &__item {
        position: relative;
        text-wrap: nowrap;
        padding-inline: vars.$cds-spacing-75;

        .cds-tooltipzz__text {
            display: none;
        }

        &.is-active,
        &:has(.is-active) {

            .cds-navigation__button__icon,
            .cds-navigation__button__text {
                color: var(--cds-color-accent-primary-main);
            }

            .cds-navigation__button__icon::before {
                @include mixins.cds-icon-size(vars.$cds-icon-150);
            }
        }

        &.is-disabled,
        &:disabled {
            * {
                color: var(--cds-color-text-muted);
                cursor: not-allowed;
            }
        }

        &:has(.cds-badge) {
            .cds-navigation__button__icon::after {
                content: '';
                position: absolute;
                width: vars.$cds-size-50;
                height: vars.$cds-size-50;
                background-color: var(--cds-color-accent-primary-main);
                border-radius: $_cds-navigation-item-border-radius;
                padding: 0;
                transform: translate(vars.$cds-size-50, calc(-1 * vars.$cds-size-50));
                outline: 2px solid var(--cds-color-background-soft);
            }
        }
    }

    &__button {
        width: 100%;
        border: 0;
        color: var(--cds-color-text-default);
        background-color: transparent;
        display: flex;
        flex-direction: row;
        gap: vars.$cds-spacing-75;
        padding: vars.$cds-spacing-50;
        justify-content: space-between;
        align-items: center;
        border-radius: $_cds-navigation-item-border-radius;
        min-width: vars.$cds-size-250;
        cursor: pointer;

        &:has(.cds-avatar--small) {
            padding: vars.$cds-spacing-25;
            gap: vars.$cds-spacing-50;
        }

        &:hover {
            background-color: var(--cds-color-background-default);
        }

        &__icon {
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            &::before {
                @include mixins.cds-icon-size(vars.$cds-icon-150);
            }

            &.has-badge::after {
                content: '';
                position: absolute;
                width: vars.$cds-size-50;
                height: vars.$cds-size-50;
                background-color: var(--cds-color-accent-primary-main);
                border-radius: $_cds-navigation-item-border-radius;
                padding: 0;
                transform: translate(vars.$cds-size-50, calc(-1 * vars.$cds-size-50));
            }

        }

        &__text {
            @include mixins.cds-paragraph-m;
            text-align: left;
            width: 100%;
        }

        &__chevron {
            //min-width: vars.$cds-size-150;
            transition: all vars.$cds-transition-fast ease-in-out;
            @include mixins.cds-icon(config.$default-icon-chevron);

            &::before {
                @include mixins.cds-icon-size(vars.$cds-icon-150);
            }
        }
    }
}

//SUBNAVIGATION
.cds-subnavigation {
    height: 0;
    display: flex;
    flex-direction: column;
    gap: vars.$cds-spacing-25;
    padding-block: 0;
    padding-inline: vars.$cds-spacing-50;
    margin-left: vars.$cds-spacing-125;
    border-left: 1px solid var(--cds-color-border-default);
    z-index: vars.$cds-layer-dropdown;
    transition: all vars.$cds-transition-fast ease-in-out;
    overflow: hidden;

    &__item {
        position: relative;

        &.is-active {

            .cds-subnavigation__button__icon,
            .cds-subnavigation__button__text {
                color: var(--cds-color-accent-primary-main);
            }

            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: 0;
                height: 100%;
                width: 2px;
                background-color: var(--cds-color-accent-primary-main) !important;
            }

        }

        &.is-disabled,
        &:disabled {
            * {
                color: var(--cds-color-text-muted);
                cursor: not-allowed;
            }
        }
    }

    &__button {
        width: 100%;
        border: 0;
        color: var(--cds-color-text-default);
        background-color: transparent;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        gap: vars.$cds-spacing-50;
        padding: vars.$cds-spacing-25 vars.$cds-spacing-100;
        border-radius: $_cds-navigation-item-border-radius;
        min-height: vars.$cds-size-200;

        &:hover {
            background-color: var(--cds-color-background-default);
        }

        &__text {
            text-align: left;
            width: 100%;
        }

        &.is-disabled,
        :disabled {
            color: var(--cds-color-text-muted);
            cursor: not-allowed;
        }
    }

    &__divider {
        display: block;
        padding: vars.$cds-spacing-50 vars.$cds-spacing-100;

        &::before {
            content: "";
            position: absolute;
            height: 1px;
            width: calc(100% - vars.$cds-spacing-200);
            background-color: var(--cds-color-border-default) !important;
        }
    }
}

.is-opened {
    .cds-navigation__button {
        background-color: var(--cds-color-background-default);

        &__chevron {
            transform: rotate(90deg);
        }
    }

    .cds-subnavigation {
        //display: flex;
        padding-block: vars.$cds-spacing-50;
        height: auto;
    }
}

.cds-sidebar__bottom .is-opened .cds-navigation__button__chevron {
    transform: rotate(-90deg);
}

//COMPACT
[sidebar-style="compact"] {

    .cds-sidebar__bottom .cds-subnavigation {
        transform: translateY(-100%);
        top: vars.$cds-spacing-250 !important;
    }

    .cds-navigation {
        padding-inline: vars.$cds-spacing-0;
    }

    .cds-navigation__divider {
        //left: -300px;
        text-indent: -100vw;

        &::before {
            content: "";
            position: absolute;
            //left: 320px;
            top: vars.$cds-spacing-125;
            height: 1px;
            width: vars.$cds-size-150;
            background-color: var(--cds-color-border-default) !important;
        }
    }

    .cds-navigation__item {

        &:hover:not(.is-opened) .cds-navigation__button__text {
            display: flex;
            @include mixins.cds-paragraph-s;
            position: absolute;
            width: max-content;
            left: 110%;
            top: 50%;
            transform: translateY(-50%);
            text-wrap: wrap;
            z-index: vars.$cds-layer-fixed;
            color: var(--cds-color-text-default);
            background-color: var(--cds-color-background-default);
            padding: vars.$cds-spacing-25 vars.$cds-spacing-100;
            border-radius: $_cds-tooltip-border-radius;
            box-shadow: vars.$cds-elevation-subtle;
            border: 1px solid var(--cds-color-border-default);
        }

        & .cds-subnavigation {
            height: auto;
            overflow: visible;
            display: none;
            position: absolute;
            width: fit-content;
            padding: vars.$cds-spacing-50;
            box-shadow: vars.$cds-elevation-raised;
            border-radius: vars.$cds-border-radius-50;
            border: 1px solid var(--cds-color-border-default);
            background-color: var(--cds-color-background-default);
            margin-left: 0;
            top: 0;
            left: 90%;
        }

        &.is-opened {
            .cds-subnavigation {
                display: flex;
            }

            .cds-subnavigation__button:hover {
                background-color: var(--cds-color-background-default--hover);
            }
        }

        .cds-navigation__button {
            display: flex;
            flex-direction: row;
            width: fit-content;

            &__text,
            &__chevron,
            .cds-badge {
                display: none;
            }

            /*& *:not(.cds-navigation__button__icon, .cds-avatar, .cds-avatar__text, .cds-avatar__icon, .cds-avatar__image) {
                display: none;
            }*/
        }
    }
}