@import "../dao-color.scss";

$header-height: 26px;
$header-line-height: 16px;
$header-tab-width: 72px;
$header-bg-color: #e6e9ef;
$header-tab-border-color: #ccd1d9;

.dao-panel {
    width: 100%;
    border: 1px solid $header-tab-border-color;
    max-height: 100%;
    position: relative;
}

.dao-panel-header {
    width: 100%;
    height: $header-height;
    background-color: $header-bg-color;
    border-bottom: 1px solid $header-tab-border-color;

    .dao-panel-nav-item {
        display: block;
        float: left;
        height: $header-height;
        padding: 5px 10px;
        line-height: $header-line-height;
        background-color: $header-bg-color;
        font-size: 13px;
        color: #595f69;;
        text-align: center;
        border-right: 1px solid $header-tab-border-color;
        border-bottom: 1px solid $header-tab-border-color;
        cursor: pointer;
        user-select: none;
    }

    .dao-panel-nav-item.active {
        background-color: $white;
        border-bottom: 0;
        color: #3d444f;
    }

    .dao-panel-nav-item:focus {
        background-color: $header-tab-border-color;
        color: #3D444F;
    }

    .dao-panel-nav-item:hover {
        background-color: #F5F7FA;
        color: #595F69;
    }

    .dao-panel-nav-item.active:hover {
        background-color: $white;
        color: #3d444f;
    }
}

.dao-panel-body {
    padding: 16px 22px;
    overflow-y: scroll;
}

.dao-panel-topper {
    height: 7px;
    width: 100%;
    position: absolute;
    top: -5px;
    cursor: row-resize;
    touch-action: none;
    -ms-touch-action: none;
}

.dao-panel-divider {
    position: absolute;
    height: 7px;
    width: 100%;
    top: 0;
    margin-top: -3px;
    cursor: row-resize;
    user-select: none;
}
