RocketChat/Rocket.Chat

@import '../../../styles/colors';
@import '../../../styles/variables';

$separator-text-font-size: 0.625rem;
$separator-text-letter-spacing: 0.2px;
$separator-line-width: 2px;
$separator-date-text-color: $color-text-grey;
$separator-date-line-color: $bg-color-grey;
$separator-unread-text-color: $color-red;
$separator-unread-line-color: $color-red;

.separator {
    display: flex;

    margin: $default-gap 0;
    align-items: center;
    flex-flow: row nowrap;

    &__text {
        height: 1rem;
        padding: 0 0.5rem;

        text-align: center;
        white-space: nowrap;
        letter-spacing: $separator-text-letter-spacing;

        font-size: $separator-text-font-size;
        font-weight: bold;
        line-height: 1rem;
    }

    &__line {
        flex: 1 0 0;

        min-width: 1rem;

        border-width: 0;
        border-top: $separator-line-width solid;
    }

    @mixin state($text-color, $line-color) {
        .separator__text {
            color: $text-color;
        }

        .separator__line {
            border-color: $line-color;
        }
    }

    &--date {
        @include state($separator-date-text-color, $separator-date-line-color);
    }

    &--unread {
        @include state($separator-unread-text-color, $separator-unread-line-color);
    }
}