@import "../../theme/conf";
$config-width:230px;
.right-config-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 0;
    height: 100%;
    background: $sidebar-bg;
    border-left: 1px solid $border-color;
    overflow-x: hidden;
    @include transition(all .4s);
}

.config-switch {
    position: absolute;
    top: 16px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: $sidebar-bg;
    border: none;
    outline: none;
    color: $sidebar-fonts-color;
    font-size: $lg-text;
    @include transition(all .4s);
    &:hover {
        color: $primary;
    }
}

.right-config-wrap-on {
    width: $config-width;
}

.config-header {
    padding: 5px 10px;
    width: $config-width;
    height: auto;
    color: $sidebar-fonts-color;
    .config-title {
        border-left: 3px solid $sidebar-fonts-color;
        padding: 0 10px;
        span {
            font-size: .8em;
        }
    }
    .desc {
        color: rgba($sidebar-fonts-color, .7);
        word-break: break-all;
        font-size: $sm-text;
        line-height: $sm-text+10;
    }
}

.config-content {
    flex: 1;
    width: $config-width;
    color: $sidebar-fonts-color;
    .config-list {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding: 20px 10px 10px 10px;
        border-bottom: 1px solid $border-color;
        &:first-child {
            border-top: 1px solid $border-color;
        }
    }
}
