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

$_layout-sidebar-width-wide: vars.$cds-layout-sidebar-l !default;
$_layout-sidebar-width-compact: vars.$cds-layout-sidebar-s;
$_layout-header-height: vars.$cds-layout-header-m !default;
//$_layout-footer-height: vars.$cds-layout-footer-s !default;

$_sidebar-toggle-size: vars.$cds-size-125;
$_sidebar-toggle-border-radius: var(--cds-button-br) !default; //config.$config-global-border-radius !default;

:root {

    --headerHeight: #{$_layout-header-height};
    //--footerHeight: #{$_layout-footer-height};
    --sidebarWidth: #{$_layout-sidebar-width-wide};
}

[sidebar-style="wide"] {
    --sidebarWidth: #{$_layout-sidebar-width-wide};
}

[sidebar-style="compact"] {
    --sidebarWidth: #{$_layout-sidebar-width-compact};
}

.cds-wrapper {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}


.cds-logo,
.cds-trafo {
    position: absolute;
    transition: all vars.$cds-transition-fast ease-in-out;

    & * {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left center;
    }
}

.cds-logo {
    left: vars.$cds-size-200;
    width: calc(var(--sidebarWidth) - vars.$cds-size-200 - vars.$cds-size-200);
    height: calc(var(--headerHeight) - vars.$cds-size-100 - vars.$cds-size-100);
}

.cds-trafo {
    left: calc(var(--sidebarWidth) * -1);
    width: vars.$cds-size-250;
    aspect-ratio: 1/1;
}

[sidebar-style="compact"] {
    .cds-logo {
        left: calc(var(--sidebarWidth) * -1);
    }

    .cds-trafo {
        left: 12px;
    }
}

//SIDEBAR
.cds-sidebar {
    position: relative;
    z-index: vars.$cds-layer-structure;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: width vars.$cds-transition-fast ease-in-out;
    width: var(--sidebarWidth);

    background-color: var(--cds-color-background-soft);
    //box-shadow: inset -4px 0 20px 0 var(--cds-color-background-deep);
    //border-right: 1px dashed var(--cds-color-border-default);
    color: var(--cds-color-text-default);
    //background: linear-gradient(to bottom, var(--cds-color-background-default), var(--cds-color-background-soft));
    //background: linear-gradient(to right, var(--cds-color-background-default), var(--cds-color-background-soft));

    &__toggle {
        border: 0;
        padding: 0;
        background-color: var(--cds-color-background-default);
        width: $_sidebar-toggle-size;
        height: $_sidebar-toggle-size;
        border-radius: $_sidebar-toggle-border-radius;
        position: absolute;
        right: calc($_sidebar-toggle-size / 2);
        //box-shadow: inset 0 0 0 1px var(--cds-color-border-default);
        transform: translate(100%, calc(var(--headerHeight) - calc($_sidebar-toggle-size / 2))) rotate(180deg);
        cursor: pointer;
        color: var(--cds-color-text-muted);
        @include mixins.cds-icon(config.$default-icon-chevron);
        //@include mixins.cds-icon-size($_sidebar-toggle-size);
        transition: all vars.$cds-transition-fast ease-in-out;

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

        &:hover {
            color: var(--cds-color-accent-primary-main);
        }
    }

    &__top {
        transition: min-height vars.$cds-transition-fast ease-in-out;
        min-height: var(--headerHeight);
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    &__main {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-block: vars.$cds-spacing-100;
        overflow-x: hidden;
        overflow-y: auto;
    }

    &__bottom {
        width: inherit;
        padding-block: vars.$cds-spacing-100;
        overflow-x: hidden;
        overflow-y: auto;
        //border-top: 1px solid var(--cds-color-border-default);
        //background: linear-gradient(to bottom, var(--cds-color-background-default), var(--cds-color-background-soft));
    }
}

[sidebar-style="compact"] {

    .cds-sidebar__toggle {
        transform: translate(100%, calc(var(--headerHeight) - calc($_sidebar-toggle-size / 2))) rotate(0deg);
    }

    .cds-sidebar__main,
    .cds-sidebar__bottom {
        overflow-y: initial;
        overflow-x: initial;
    }
}

//CONTENT
.cds-main {
    z-index: vars.$cds-layer-ground;
    //position: absolute;
    //transition: left vars.$cds-transition-fast ease-in-out;
    //left: var(--sidebarWidth);
    //width: calc(100% - var(--sidebarWidth));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: var(--cds-color-background-default);
    min-height: 100%;
    gap: vars.$cds-spacing-150;
    overflow-y: auto;
    width: 100%;

    &__header {
        z-index: vars.$cds-layer-structure;
        transition: min-height vars.$cds-transition-fast ease-in-out;
        min-height: var(--headerHeight);
        padding-inline: vars.$cds-spacing-200;
        display: flex;
        flex-direction: column;
        top: 0;
        //border-bottom: 1px solid var(--cds-color-border-default);
        justify-content: center;
        align-items: flex-start;
        background-color: var(--cds-color-background-default);

    }

    &__section {
        //flex: 1;
        //flex-grow: 1;
        //overflow-y: inherit;
        background-color: var(--cds-color-background-default);
        padding-inline: vars.$cds-spacing-200;
        margin-bottom: auto;
    }

    &__footer {
        @include mixins.cds-paragraph-s;
        //height: var(--footerHeight);
        padding-block: vars.$cds-spacing-50;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-inline: vars.$cds-spacing-200;

        //border-top: 1px solid var(--cds-color-border-default);
        background-color: var(--cds-color-background-default);
        //position: sticky;
        bottom: 0;
    }
}