@import './var.scss';

:root {
    --sortbar-height: #{$sortbar-height};
    --sortbar-bg: #{$sortbar-bg};
    --sortbar-font-size: #{$sortbar-font-size};
    --sortbar-text-color: #{$sortbar-text-color};
    --sortbar-line-height: #{$sortbar-line-height};
    --sortbar-line-color: #{$sortbar-line-color};
}

.jing-sortbar {
    display: flex;
    background-color: var(--sortbar-bg);
    //   justify-content: space-between;
    height: var(--sortbar-height);

    &--chan {
        .jing-sortbar__item,
        .jing-sortbar__filter {
            flex: 0 1 auto;
            padding: 0 var(--padding-md);
        }
    }

    &__item,
    &__filter {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: var(--sortbar-text-color);
        font-size: var(--sortbar-font-size);
        padding: 0 var(--padding-base);
        line-height: var(--sortbar-line-height);

        span {
            margin-left: 5px;
        }
    }
    &__filter {
        //   https://stackoverflow.com/questions/22429003/how-to-right-align-flex-item/22429853#22429853
        margin-left: auto;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 40%;
            border-left: solid var(--sortbar-line-color) 1px;
        }
    }
}