@import "../../variables";

$panelHeader-width: 2rem;

$panelHeader-border-width: .4rem;

.cxb-panelHeader{
    background: $nav-background-color;
    align-items: center;
    border-radius: 3px;
    border-width: 0;
    border-color: $nav-selected-color;
    border-style: solid;
    overflow: hidden;

    .cse-panelHeader-title,
    .cse-panelHeader-parentName{
        font-weight: bolder;
    }

    .cse-panelHeader-parentName{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cse-panelHeader-title{
        font-size: 1rem;
    }

    .cse-panelHeader-collapseSign{
        display: block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        border-radius: 50%;

        .fa{
            opacity: .4;
            color: $base-font-color-light;
        }
    }
    &.cxm-collapsible{
        &:hover{
            .cse-panelHeader-collapseSign{
                //box-shadow: 0px 0px 3px 2px $ascentI-color;
                .fa{
                    opacity: 1;
                }
            }
            background-color: lighten($nav-background-color, 2);
        }
    }

}

.cxb-panelHeader.cxm-horizontal{
    padding: 0.4em;
    display:flex;
    flex-direction: row;
    width: 100%;
    border-left-width: $panelHeader-border-width;
    min-height: $panelHeader-width;
    height: auto;

    .cse-panelHeader-title,
    .cse-panelHeader-parentName{
        padding-left: 0.2em;
    }

    .cse-panelHeader-parentName{
        max-width: 15rem;
    }

    .cse-panelHeader-collapseSign{
        .fa{
            padding-right: 1px;
        }
    }
}

.cxb-panelHeader.cxm-vertical{
    padding: 0.4em 0;
    display: flex;
    flex-direction: column;
    border-top-width: $panelHeader-border-width;
    min-width: $panelHeader-width;
    width: $panelHeader-width;
    height: 100%;

    .cse-panelHeader-title,
    .cse-panelHeader-parentName{
        writing-mode: vertical-lr;
        padding-top: .4em;

    }

    .cse-panelHeader-parentName{
        max-height: 15rem;
    }

    .cse-panelHeader-title{
        padding-bottom: 1em;
    }

    .cse-panelHeader-collapseSign{
        .fa{
            padding-left: 1px;
        }
    }
}

.cxb-panelHeader.cxm-inner{
    background-color: $ascentII-color-light;
    border-color: $ascentII-color;

    &.cxm-collapsible{
        &:hover{
            .cse-panelHeader-collapseSign{
                //box-shadow: 0px 0px 3px 2px $ascentII-color;
            }
            background-color: lighten($ascentII-color-light, 2);
        }
    }


}

.cxb-panelHeader.cxm-collapsible{
    cursor: pointer;
}

.cxb-button.cxm-panelCollapse{
    font-size: 110%;
    padding: 0;
    height: auto;
}