@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --panel-header-background: #fbfbfb;
    --panel-header-color: #191919;
    --panel-header-icon-background: #fbfbfb;
    --panel-header-icon-color: #191919;
    --panel-background: #ffffff;
    --panel-color: #191919;
    --panel-border-color: #e8e8e8;
    --panel-border-radius: 6px;
    --panel-dropdown-toogle-color: #191919;
}

.dark-side {
    --panel-header-background: #282c35;
    --panel-header-color: #fbfbfb;
    --panel-header-icon-background: #282c35;
    --panel-header-icon-color: #fbfbfb;
    --panel-background: #2b2d30;
    --panel-color: #dbdfe7;
    --panel-border-color: #4a4d51;
    --panel-dropdown-toogle-color: #ffffff;
}

.panel {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    background: var(--panel-background);
    color: var(--panel-color);
    border: 1px solid var(--panel-border-color);
    border-radius: var(--panel-border-radius);
}

.panel {
    .dropdown-toggle {
        &::before {
            border-color: var(--panel-dropdown-toogle-color)!important;
        }
    }

    .panel-title, .panel-content {
        position: relative;
    }

    .panel-title {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        order: 1;
        height: 2.625rem;
        border-bottom: 1px solid var(--panel-border-color);
        line-height: 2.625rem;
        cursor: default;
        flex-shrink: 0;
        font-size: 16px;
        background: var(--panel-header-background);
        color: var(--panel-header-color);
        border-top-left-radius: var(--panel-border-radius);
        border-top-right-radius: var(--panel-border-radius);
        overflow: hidden;
        user-select: none;

        .icon {
            order: 1;
            height: 2.625rem;
            line-height: 2.625rem;
            width: 2.625rem;
            border-right: 1px solid var(--panel-border-color);
            flex-shrink: 0;
            text-align: center;
            background: var(--panel-header-icon-background);
            color: var(--panel-header-icon-color);
        }

        img.icon {
            padding: .625rem;
        }

        .caption {
            order: 2;
            width: 100%;
            padding: 0 .8125rem;
            color: inherit;
            .text-ellipsis();
        }

        .dropdown-toggle {
            order: 4;
            height: 100%;
            width: 2.625rem;
            border-left: 1px solid var(--panel-border-color);
            flex-shrink: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            
            svg {
                margin: 0;
            }
        }

        .custom-buttons {
            order: 3;
            display: flex;
            flex-flow: row nowrap;
            margin-right: .5rem;
        }

        .btn-custom {
            width: 24px;
            height: 24px;
            border-radius: 3px;
            border: 1px solid var(--card-button-border-color);
            padding: 0;
            margin-right: 2px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .panel-content {
        display: block;
        order: 2;
        height: auto;
        padding: .5rem;
        font-size: 14px;
    }
}