/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/panels_vars";
@import "../mixins";

.dlt-panel {
    @include component-vars(panels); //Mixin to define all the root variables
    margin: 0;
    padding: $panels-padding;
    font-family: $panels-font-family;
    height: auto;
    width: 25%;
    overflow-x: hidden;
    position: relative;
    background: $panels-color-background;
    box-shadow: $panels-elevation;
    border-radius: $panels-border-radii;

    // @include transition(all 0.3s $bezier); //Animation

    &__sm {
        width: $panels-width-sm;
    }

    &__md {
        width: $panels-width-md;
    }

    &__lg {
        width: $panels-width-lg;
    }

    &__no-shadow {
        box-shadow: none;
    }

    &__collapsed {

        &.dlt-panel__right,
        &.dlt-panel__left {
            width: $panels-collapsed-width;
            padding-left:8px;
            padding-right:8px;
        }

        &.dlt-panel__bottom {
            height: $panels-collapsed-height;
            min-height: $panels-collapsed-height;
            overflow-y: hidden;
            padding: $panels-bottom-padding-collapsed;

            h4{
                line-height:40px;
            }
        }

        .dlt-panel-chevron .dlt-panel-chevron__button {
            display: block;
        }
    }

    &__content{
        width: 100%;
        height: auto;

        h4{
            margin-bottom: 0;
        }
    }

    &__left {
        float: left;

        &.dlt-panel__no-shadow {
            border-right: $panels-border-width $panels-border-style $panels-color-border;
        }

        .dlt-panel-chevron {

            .dlt-panel-chevron__button{
                float: right;
            }

            // bottom: $panels-chevron-position;
            // right: $panels-chevron-position;
        }
    }

    &__right {
        float: right;

        &.dlt-panel__no-shadow {
            border-left: $panels-border-width $panels-border-style $panels-color-border;
        }

        .dlt-panel-chevron {

            .dlt-panel-chevron__button {
                float: left;
            }
            // bottom: $panels-chevron-position;
            // left: $panels-chevron-position;
        }
    }

    &__bottom {

        width: 100%;
        max-height: 33%;
        min-height: 280px;
        padding: $panels-bottom-padding;

        &.dlt-panel__no-shadow {
            border-top: $panels-border-width $panels-border-style $panels-color-border;
        }

        .dlt-panel__content {
            float: left;
            width: calc(100% - 40px);
        }

        h4{
            margin-bottom:0;
            line-height: 24px;
        }

        .dlt-panel-chevron {
            width: 40px;
            height: 40px;
            float: right;
        }
    }

    &-chevron {
        width: 100%;
        height: auto;
        position: relative;

        &__button {
            transition: none;
            color: var(--dlt-color-icon-interactive-secondary, #011F3D);

            &:active:enabled{
                color: var(--dlt-color-icon-interactive-secondary, #011F3D);
            }

            i,
            em {
                font-size: $panels-chevron-size !important;
            }
        }
    }

}