@import "/static/global.less";

.region-header {
    text-transform: uppercase;
}

.zone {
    @time-offset-lozenge-width: 40px;
    @highlightedTextColor: white;

    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: 100%;
    align-items: center;

    .zone-name {
        font-size: @aui-font-size-small;
        color: @secondaryTextColor;
        padding: 0 @baseSpacing;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        align-self: flex-end;

        .select2-highlighted & {
            color: @highlightedTextColor;
        }
    }

    .zone-offset {
        margin-left: auto;
        min-width: @time-offset-lozenge-width;
    }
}
