.round-tabs {
    a {
        color: $text-color;
        &:hover {
            color: $text-color;
            text-decoration: none;
        }
    }

    ul {
        list-style-type: none;
        display: flex;
        margin: 0px;
        margin-left: -3px;
    }
    li {
        margin-left: 3px;
    }

    @mixin switch-circle($color) {
        border: 2px $color solid;
        background-color: $mat;
        &:hover {
            background-color: $color;
        }
        &._active {
            background-color: $color;
        }
    }

    ._icon {
        @include border-radius(50%);
        display: table-cell;

        cursor: pointer;
        transition: background-color 0.2s ease;

        text-align: center;
        vertical-align: middle;

        width: 36px;
        height: 36px;
        font-size: 14px;
        @include breakpoint(B) {
            width: 46px;
            height: 46px;
            font-size: 18px;
        }
    }

    ._icon._active {
        cursor: default;
    }

    ._icon._switch-quests {
        @include switch-circle($bright-color);
    }
    ._icon._switch-activity {
        @include switch-circle($blue-color);
    }
    ._icon._switch-profile {
        @include switch-circle($green-color);
    }
    ._icon._switch-players {
        @include switch-circle($green-color);
    }
    ._icon._switch-stencils {
        @include switch-circle($stencil-color);
    }
    ._icon._switch-comments {
        @include switch-circle($blue-color);
    }
}

.round-tabs-small {
    ._icon {
        width: 28px;
        height: 28px;
        font-size: 11px;
        @include breakpoint(B) {
            width: 28px;
            height: 28px;
            font-size: 11px;
        }
    }
}
