@import "../../less/variables.less";

.container {
    line-height: 22px;
    display: inline-block;
    white-space: nowrap;
}

.flexContainer {
    composes: container;
    display: flex;
    line-height: 28px;
}

.item {
    border: thin solid @color-primary;
    border-width: 1px 0;
    padding: 0 5px;
    color: @color-text-dark;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    text-align: center; // for flex
    flex: 1; // for flex
    border-left: 1px solid @color-primary;
    &:first-child {
        border-left-width: 1px;
        border-radius: 2px 0 0 2px;
    }
    &:last-child {
        border-right-width: 1px;
        border-radius: 0 2px 2px 0;
    }
    &:hover {
        color: @color-primary;
    }
}

.itemMinimal {
    padding: 0 5px;
    color: @color-text-dark;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    text-align: center; // for flex
    flex: 1; // for flex
    &:hover {
        color: @color-primary;
    }
}

.activeItem {
    composes: item;

    background-color: @color-primary;
    color: #fff !important;
}

.activeItemMinimal {
    composes: itemMinimal;

    font-weight: bold;
    color: @color-primary;
}
